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“Kadavy 的 书 通俗 易 懂 ， 理 论 联系 实际 ， 效 果 非 常 好 。” 
一 一 Brad Feld，TechStars 联 合 创始 人 ，《 他 山 之 石 》 作 者 


“架构 清 断 ， 内 容 精彩 ， 涉 猫 广泛 。” 


一 一 Vitaly Fredman，Smashing Magazine 





黑客 们 崇尚 分 享 ， 所 以 他 们 可 以 从 相关 社团 及 网 上 找到 各 种 编程 问题 
的 解决 方案 ， 快 速 地 完成 开发 项 目 。 但 是 ， 对 于 设计 ， 问 题 就 不 那么 
简单 了 。 


许多 设计 教学 书籍 都 有 着 大 量 的 “须知 ”与 “切忌 ”条 目 ， 以 期 让 人 
能 够 迅速 了 解 设 计 的 惯例 及 规程 ， 但 这 种 表面 化 、 程 式 化 的 方式 往往 
无 法 令 喜 欢 探究 事物 本 质 的 黑客 们 满意 。 为 了 让 自己 的 作品 精彩 出 
众 ， 他 们 往往 希望 追溯 到 设计 的 源头 ， 了 解 设计 现象 及 趋势 的 本 质 。 
本 书 采用 逆向 解析 方式 ， 直 丁 解 牛 般 剖 析 了 一 众 经 典 设 计 。 从 文艺 复 
兴 时 期 的 雕塑 ， 到 印象 派 绘画 ， 再 到 现代 的 Mac OS X 的 Aqua 界面 以 及 
Twitter 的 页 面 设计 ， 还 原 历史 真相 ， 细 说 风格 由 来 ， 逐 步 讲解 色彩 、 
排版 、 比 例 等 设计 理论 ， 并 在 此 基础 上 提出 了 大 量 真切 可 行 的 设计 最 
佳 实践 。 读 来 令 人 耳目 一 新 ， 信 心 倍增 。 


本 书 主要 内 容 
口 设计 内 涵 及 层次 的 理解 与 运用 。 口 媒介 与 形式 对 设计 的 影响 


口 排版 及 构图 的 原则 与 辨析 口 色彩 理论 及 其 最 佳 应 用 实践 Im 
URING 月 
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内 容 提 要 


本 书面 向 对 于 视觉 艺术 及 技巧 并 不 熟 移 的 软件 开发 人 员 ， 用 心 拾取 艺术 史上 的 众多 知名 概念 及 代表 作 
唱 加 以 细致 解读 ， 并 辅 以 多 视角 的 延展 剖析 ， 以 期 使 读者 洞 彻 与 把 担 现今 设计 概念 和 技巧 的 来 源 及 趋势， 
从 而 将 之 更 好 地 融合 于 业务 实践 中 。 本 书 题 材 广 泛 ， 实 例 丰 帘 ， 实 为 一 本 不 可 多 得 的 Web 及 移动 应 用 设计 
指南 。 

本 书 适合 Web 及 移动 应 用 的 开发 人 员 与 设计 师 阅读 - 
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致 我 的 父母 Reed 和 Marilyn Kadavy， 感 谢 你 们 一 直 鼓 励 我 追寻 自己 的 好 奇 心 。 


译 者 序 


“来 看 看 我 们 公司 的 新 宣传 彩 页 。” 前 日 闲聊 时 ， 朋 友 得 意 洋洋 地 递 给 我 说 。 

宣传 彩 页 印刷 精美 、 图 片 绚 烂 ， 但 我 看 到 的 则 是 正文 字体 偏 小 造成 的 质感 失衡 ， 小 标题 中 
英文 字体 的 搭配 不 当 , 本 应 突显 的 亮点 图 片 因 缺 少 独立 空间 而 黯然 失色 等 问题 。 当 我 一 一 指出 时 ， 
朋友 的 眼睛 里 写 满 了 “吃惊 ”。 

其 实 我 自己 也 吃惊 不 已 ,因为 近 十 年 来 我 的 工作 重心 一 直 在 服务 器 端 ,对 于 架构 .框架 ,模式 、 
性 能 和 安全 这 些 内 容 , 我 可 以 信和 手 牛 来 , 侃侃 而 谈 , 但 是 对 于 字体 、 色调 、 边 距 和 布局 这 些 术 语 ， 
过 去 我 能 做 的 也 许 就 是 点 头 微笑 而 已 。 

随 着 职责 的 转变 ， 我 不 得 不 离开 了 我 的 职业 舒适 区 ， 开 始 兼顾 产品 的 方方面面 ， 自 然 也 就 
包括 了 UI 设计 。 我 不 想 因 为 我 的 无 知 ， 成 为 只 会 对 UI 设计 师 说 “要 大 气 上 档次 "、“ 出 几 版 设 
计 ， 下 周 交 给 我 ”的 上 司 。 我 想 更 准确 地 表达 自己 的 想法 ， 也 想 更 深刻 地 理解 UI 设计 师 们 的 设 
计 上 哲学。 于 是 ， 我 开始 尝试 了 解 这 个 熟悉 而 又 陌生 的 领域 。 

这 就 是 我 翻译 这 本 书 的 初 囊 ， 因 为 在 翻译 中 去 理解 UI 设计， 可 要 比 单单 阅读 几 本 UI 设计 
书籍 深刻 得 多 ， 我 喜欢 这 种 学 习 方 式 。 

这 本 书 的 确 没有 让 我 失望 。 作 者 David Kadavy 并 没有 简单 地 将 一 些 功利 的 视觉 设计 模式 打 
包 成 速 食 快 餐 扔 到 我 们 面前 ， 而 是 将 视觉 设计 的 方方面面 制作 成 一 份 精致 的 法 式 大 餐 一 一 开胃 
菜 、 汤 、 副 菜 、 主 菜 、 甜 品 和 果品 ,一 应 俱全 。 在 书 中 领略 UI 设计 精华 的 同时 ， 我 还 读 到 了 古 
罗马 万 神殿 、 西 方 文字 起 源 、 印 象 派 、 印 刷 术 、 文 艺 复兴 、 颜 色 感知 原理 等 等 生动 有 趣 的 内 容 。 
这 不 是 一 本 UI 设计 的 人 门 教程 ， 因 为 我 相信 里 面 的 很 多 内 容 对 于 从 事 UI 设计 多 年 的 朋友 也 很 
有 价值 ， 但 它 也 可 以 作为 UI 设计 的 人 门 教程 ， 对 于 初学 者 来 说 ， 系 统 全 面 的 知识 要 比 会 几 个 
PS 技巧 重要 得 多 。 我 相信 任何 渴望 提升 自己 UI 设计 能 力 ， 抑 或 像 我 一 样 希望 同时 提升 鉴赏 能 
力 的 朋友 ， 都 可 以 在 这 本 书 中 找到 想 要 的 东西 。 

诚然 ， 翻 译 并 不 是 件 轻松 的 事情 ， 但 能 将 一 本 如 此 优秀 的 UI 设计 书籍 带 给 各 位 朋友 ， 这 
一 切 都 是 值得 的 。 由 于 受 个 人 专业 水 平和 时 间 的 双重 限制 ， 译 稿 中 难免 会 有 错误 或 者 不 妥 之 处 ， 
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在 此 诚 灵 地 希望 读者 批评 指正 。 你 可 以 通过 我 的 邮箱 yuanyk@gmail.com 和 我 探讨 UI 设计 或 者 
其 他 软件 开发 的 相关 话题 - 

在 此 要 感谢 我 的 妻子 ， 她 参与 了 部 分 章节 的 翻译 和 审 校 ， 使 译文 不 仅仅 忠实 于 原文 ， 而 且 
更 为 通俗 流畅 。 还 要 感谢 图 灵 公司 的 编辑 李 夺 、 余 倩 、 高 楠 、 丁 晓 哆 ， 他 们 的 专业 和 耐心 使 我 
可 以 更 从 容 仔细 地 完成 本 书 的 翻译 ， 让 这 一 切 成 为 一 种 享受 ， 而 不 是 一 份 任务 。 

最 后 ， 感 谢 你 花费 时 间 来 了 解 我 对 这 本 书 的 看 法 ， 相 信 本 书 也 一 定 不 会 让 你 失望 ! 


苑 永 凯 , 2013 年 春 
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我 本 无 权 署名 于 这 本 书 ， 毕 竟 它 是 众人 工作 、 智 慧 和 灵感 的 结晶 。 我 所 做 的 仅 是 用 这 些 年 
来 所 得 的 经 验 ， 尽 我 所 能 地 将 其 归纳 总 结 、 筛 选 并 处 理 成 文 。 

我 最 想 感 谢 的 是 策划 编辑 Chris Webb， 是 他 的 远见 和 胆识 使 这 本 被 男 一 家 出 版 商 散 为 “起 
点 太 高 ”的 书 得 以 出 版 。 感 谢 编辑 Elizabeth Kuball， 她 的 宝贵 意见 和 写作 技巧 ， 帮 我 将 一 些 支 
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了 好 奇 心 ， 他 们 并 没有 什么 额外 的 报酬 。 因 此 ， 感 谢 Chris Duesing 、Zack Gilbert、Jacob Rus 以 
及 Paul Stamatiou。 

虽然 大 量 的 有 用 知识 都 收藏 在 图 书馆 中 ,但 是 网 络 上 也 有 海量 的 信息 和 可 视 化 资源 ， 所 以 
本 书写 起 来 容易 了 很 多 。 感 谢 所 有 为 互联 网 做 出 杰出 贡献 的 人 ,感谢 维基 百科 贡献 者 , 感谢 博 主 ， 
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如 果 不 是 一 连 串 不 可 思议 的 境遇 ,使 我 有 机 会 在 硅谷 最 热血 的 时 期 来 到 这 里 生活 和 工作 ， 
那么 可 能 也 就 不 会 写 下 这 本 书 。 在 那 段 时 期 ,我 遇 到 了 最 有 创意 的 伙伴 ， 所 以 感谢 你 们 所 有 
人 ， 以 及 那些 像 你 们 一 样 富有 创意 但 不 在 硅谷 的 人 。 感 谢 把 我 带 到 硅谷 的 Je 人 f Cannon 和 Jon 
Stevenson。 感 谢 Vinnie 、Kristine Lauria、Noah Kagan 、Paul Bragiel 和 Ramit Sethi， 感 谢 你 们 以 
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感谢 Ryan Halvorsen 、Joe Avella 和 Matt Taets 给 予 我 的 鼓励 。 感 谢 Ziad Hussain， 是 你 的 一 
句 话 促 成 了 这 本 书 的 诞生 。 

最 后 ， 感 谢 此 刻 那 些 或 站 或 坐 或 辆 、 阅 读本 书 的 各 位 ， 以 及 通过 未 来 科技 设备 吸收 这 些 思 
想 和 理念 的 朋友 。 你 们 的 眼球 运动 (或 突 触 )、 心 跳 ， 以 及 通过 博客 评论 、 微 博 、 邮 件 或 者 当面 
所 说 的 那些 激励 话语 ， 抑 或 建设 性 的 批评 ， 都 为 我 提供 了 动力 ， 帮 助 我 完成 了 迄今 为 止 我 生命 
中 最 大 的 工程 。 很 激动 能 与 各 位 分 享 知识 。 你 们 愿意 读 我 的 书 ， 这 令 我 惊喜 万 分 。 非 常 感谢 。 


小 学 时 ， 我 最 差 的 科目 就 是 书法 。 我 的 字 写 得 很 烂 ， 就 像 是 土 拨 鼠 将 一 堆 树枝 吐 在 了 纸 上 。 
所 以 ,每 学 期 结束 我 带 成 绩 簿 回 家 的 时 候 ， 上 面 满 是 A 和 B， 而 书法 课 却 只 有 C-。 

我 从 来 不 是 一 个 盲目 接受 传统 的 人 , 我 曾 想 : 即使 写 得 一 手 好 字 , 那 又 怎样 ? 因此 对 我 来 说 ， 
认为 练 字 “ 很 无 聊 ” 甚 至 是 在 “浪费 时 间 "， 也 就 毫 不 奇怪 了 。 我 当时 太 年 轻 ， 对 于 自己 无 法 获 
得 成 功 的 事情 ， 不 会 尊重 其 价值 。( 虽然 我 真 的 认为 ， 以 书法 来 打分 本 身 就 是 一 件 既 无 聊 而 又 浪 
费时 间 的 事情 - ) 

无 论 我 问 多 少 次 ,每 次 都 得 到 相同 的 答案 :“ 等 你 长 大 了 ,工作 了 , 需要 与 人 清楚 地 沟通 时 ， 
就 需要 写 得 一 手 好 字 了 。” 

多 亏 了 计算 机 时 代 的 来 临 。 我 写字 仍然 很 烂 。 我 可 以 绘制 字符 ,但 仍然 写 不 好 。 

现在 我 明白 了 ， 老 师 的 意图 从 根本 上 来 说 是 有 意义 的 :清楚 地 沟通 是 成 功 的 关键 。 幸 运 的 
是 ,我 很 少 依赖 书写 的 方式 来 与 人 进行 清楚 的 沟通 。 我 可 以 简单 地 打 一 封 电子 邮件 ,做 个 幻灯 片 ， 
或 者 写本 书 ， 借 助 整洁 漂亮 的 排版 就 能 呈现 出 来 。 很 多 字体 在 500 年 前 就 已 经 非常 完善 ， 至 今 
它们 仍然 有 力 清晰 地 承载 着 文字 。 

此 外 ,我 曾 花费 数 年 的 时 间 ， 研 究 视觉 传播 的 微妙 之 处 。 孩 提 时 代 生 活 在 内 布 拉 斯 加 州 ， 
我 时 常 在 家 中 画 画 ， 度 过 了 无 数 个 无 聊 的 日 子 。 大 学 里 ， 我 读 尽 了 图 书馆 中 所 有 关于 排版 和 设 
计 的 书籍 ， 忙 于 进行 排版 和 几何 方面 的 实验 而 不 是 参加 聚会 ， 最 终 取得 了 平面 设计 学 位 。 在 古 
罗马 帝国 遗址 之 上 ， 我 研究 过 现代 印刷 术 的 起 源 。 在 建筑 公司 工作 时 ， 我 甚至 探讨 过 如 一 块 砖 、 
一 片 木头 等 简单 事物 背后 的 深层 意义 。 最 后 ， 在 硅谷 快 节奏 的 创业 公司 里 ， 我 将 这 些 实践 和 分 
析 的 成 果 应 用 到 了 实处 。 设 计 和 视觉 传播 已 深 深 地 印 人 我 的 脑海 ， 以 至 于 我 几乎 意识 不 到 它们 
的 存在 。 虽 然 我 写 的 字 仍 然 很 烂 。 


设计 素养 
有 天 晚上 ,我 和 朋友 Ziad 在 一 家 咖啡 馆 里 “办 公 ”, 为 我 博客 的 WordPress 模板 做 些 设计 改进 。 


黑客 与 设计 : 剖析 设计 之 美的 秘密 


Ziad 总 能 说 出 些 深奥 的 话 ， 打 断 我 的 注意 力 却 又 让 我 思路 大 开 ， 今 晚 也 不 例外 。 他 说 :“ 设 计 很 
神秘 。 懂 设计 的 人 却 似乎 无 法 诠释 它 -就 像 如 果 让 他 们 教 你 如 何 去 做 设计 ,他 们 会 说 这 要 看 天 赋 。” 

Ziad 的 话 让 我 觉得 很 有 趣 ， 但 直到 一 年 后 ， 我 才 理解 这 句 话 的 深刻 含义 。 我 首先 领悟 到 的 
是 ， 只 有 非 职业 设计 师 才 真正 想 学 习 设计 ， 而 设计 的 能 力 对 我 来 说 是 件 理所当然 的 事 。 这 是 项 
很 棒 的 技能 ， 尤 其 是 在 创作 自己 的 应 用 程序 或 参加 周末 黑客 马拉松 ( 例如 Django Dash 或 Rails 
Rumble ) 时 。 我 可 以 任 空 创造 这 种 质量 的 感知 ， 这 种 价值 。 但 我 不 是 后 端 程序 员 ， 我 很 清楚 ， 
如 果 没 有 背后 开发 人 员 创 建 的 不 可 思议 的 机 器 语言 ， 我 的 设计 什么 也 不 是 。 

其 次 ,我 意识 到 设计 技能 是 一 种 新 的 读 写 能 力 。 我 之 所 以 受 烂 书法 的 连累 ， 就 是 因为 写字 
是 沟通 的 一 部 分 。 我 可 以 写 出 东西 的 唯一 原因 是 我 受过 教育 。 

这 个 理念 听 起 来 非常 简单 ,但 是 从 人 类 历史 上 看 还 是 相当 新 颖 的 。 今 天 大 多 数 人 都 会 读 会 写 ， 
但 几 百 年 前 可 并 非 如 此 。 对 于 想 学 习 文字 书写 的 人 , 必须 先知 道 如 何 阅读 ; 对 于 想 学 习 阅 读 的 人 ， 
又 不 得 不 接触 文字 书写 。 为 了 使 阅读 者 能 接触 到 文字 ， 那 些 有 读 写 能 力 的 人 就 需要 创作 些 带 字 
的 东西 ， 比 如 书籍 

但 文明 社会 中 的 普通 人 ， 却 直到 近代 才 买 得 起 书 的 。 公 元 1455 年 ， 约 坦 内 斯 . 古 腾 堡 印 制 
了 第 一 本 书 , 俗 称 * 四 十 二 行 圣 经 "( 参见 第 3 章 )。 在 随后 的 几 百 年 中 , 书 的 价格 快速 下 降 。 不 过 ， 
在 古 腾 保 圣经 出 现 之 前 ， 所 有 的 书 都 是 手写 的 ， 所 以 ， 当 时 除了 神职 人 员 之 外 几乎 没 人 知道 如 
何 读 写 也 就 毫 不 奇怪 了 - 

当今 世界 已 发 生 了 翻天 覆 地 的 变化 。 大 部 分 人 都 知道 如 何 读 写 ， 而 且 也 不 必 再 担心 自己 的 
书法 如 何 。 对 于 生活 在 工业 化 世界 的 我 们 来 说 , 桌面 出 版 乃至 互联 网 发 布 , 都 已 是 稀 松平 常 了 。 

我 们 不 仅 可 以 发 布 文字 ,还 可 以 对 其 进行 设计 。 现 在 有 数 千 种 字体 可 供 我 们 使 用 。 点 击 几 
下 鼠标 就 可 以 改变 字体 的 颜色 和 尺寸 。 我们 还 可 以 在 文字 旁边 配 上 照片 和 插图 。 

我 们 都 是 现代 印刷 工 。 我 们 可 以 制作 传单 、 明 信 片 ， 以 及 带动 画 效果 的 PPT。 我 们 可 以 创 
作 博 客 、 海 报 ， 甚 至 咖啡 杯 图 案 。 

但 只 有 极 少 人 具备 设计 素养 。 诚 然 ， 设 计 品 味 问题 也 慢 慢 进入 了 我 们 的 视野 。 人 们 反击 、 
反对 丑陋 的 字体 ， 如 Comic Sans ( 参见 第 3 章 )。 没 有 设计 素养 ， 就 像 写 字 很 烂 一 样 ， 会 辞 不 达 
意 、 沟 通 不 畅 。 字体 、 颜 色 、 版 面 编排 以 及 留 白 ， 都 会 影响 我 们 所 要 传达 的 信息 ， 而 且 几 乎 所 
有 人 都 有 能 力 操控 这 些 要 素 。 这 个 世界 需要 设计 素养 。 


黑客 精神 


黑客 ， 可 谓 是 从 设计 素养 中 获 益 最 多 的 群体 。 我 所 说 的 黑客 并 不 是 那些 侵入 网 络 盗窃 密码 
的 人 ， 甚 至 都 不 必 是 软件 工程 师 。 我 说 的 是 那些 富有 创新 头脑 、 不 拘 旧 制 的 一 群 人 ， 他 们 改变 
了 我 们 生活 、 工 作 和 交互 的 方式 。 

“黑客 ”一 词 起 源 于 20 世纪 60 年 代 的 麻 省 理工 学 院 ， 当 时 用 来 指 代 计算 机 和 软件 发 烧 
友 ， 现 在 意义 变 得 更 加 宽泛 。Eric Steven Raymond 在 其 文章 “如 何 成 为 一 名 黑客 ”( www.catb. 
org/~esr/faqs/hacker-howto.html ) 中 ,列举 了 黑客 精神 的 五 个 信条 : 

口 世 界 充满 了 需要 解决 的 迷人 问题 ; 


引 


遇 


口 一 个 问题 不 应 该 被 解决 两 次 ; 

口 无 聊 和 乏味 是 罪恶 ; 

口 崇尚 自由 ; 

口 态度 不 能 蔡 代 能 力 - 

简 而 言 之 ， 黑 客 珍视 知识 ， 他 们 学 习 为 实现 梦想 所 需 的 一 切 知识 。 在 当今 世界 ， 这 通常 意 
味 着 至 少 要 学 一 些 编码 知识 ， 但 是 黑客 精神 却 适 用 于 所 有 解决 问题 的 行为 。 

遵循 黑客 精神 的 人 富有 求知 欲 ， 他 愿 为 自己 的 目标 全 力 以 赴 。 他 们 具有 创业 精神 ， 注 重 技 
能 和 知识 ， 胜 过 职称 和 经 验 - 

黑客 运动 的 先锋 组 织 是 黑客 资讯 ( Hacker News ) 社区 ( http://news.ycombinator.com )， 该 新 
闻 聚 合 网 站 由 Paul Graham 的 创业 孵化 器 Y Combinator 创建 ， 内 容 由 用 户 提交 。Y Combinator 
会 挑选 运用 自身 技能 和 黑客 精神 打造 超 酷 产 品 的 小 型 黑客 团队 ， 为 他 们 提供 资金 。 这 些小 团队 
包括 :提供 客户 支持 大 众 化 服务 的 UserVoice( www.uservoice.com ), 大 众 化 新 闻 网 站 Reddit( www. 
reddit.com )， 提 供 简 易 自 动 备份 方案 的 Dropbox ( www.dropbox.com )， 以 及 为 家 有 空房 者 和 游 
客 牵线 搭桥 的 AirBNB ( www.airbnb.com )。 

黑客 是 现代 世界 的 文人 。 他 们 创建 的 产品 和 业务 ， 不 仅 自身 会 传达 信息 ， 而 且 可 让 用 户 与 
之 交互 ， 以 及 与 其 他 用 户 彼此 沟通 交流 。 只 要 一 台 笔 记 本 、 一 个 创意 ， 以 及 几 个 小 时 的 编码 
黑客 就 能 创造 出 影响 数 百 万 人 的 东西 

黑客 之 所 以 能 在 这 么 短 的 时 间 内 取得 如 此 大 的 成 果 ， 是 因为 他 们 来 自 以 知 识 共享 为 基础 的 
社区 。 社 区 成 员 共同 投入 了 无 数 时 间 ， 编 写 软件 、 指 南 和 其 他 教程 ， 令 社区 中 的 每 个 人 都 有 所 
神 益 。 

黑客 可 以 学 习 各 种 解决 手头 问题 所 需 的 东西 。 碰 到 编程 问题 ， 他 们 会 在 Google 上 快速 搜索 
或 者 阅读 手册 ; 当 事 业 刚刚 起 步 需 要 做 财会 和 记 账 时 ， 他 们 可 以 在 网 络 上 找到 尽 可 能 多 的 资料 ， 
也 可 以 从 图 书馆 借阅 书籍 。 


设计 知识 的 匮乏 


让 黑客 最 头疼 的 事情 就 是 学 习 设计 。 黑 客 们 明白 ， 若 要 以 弱小 的 力量 与 商业 巨头 竞争 ,他 
们 需要 良好 清晰 的 设计 ， 但 是 学 习 设计 的 资源 却 很 难 找 。 当 然 他 们 可 以 雇 个 设计 师 ， 但 是 好 的 
设计 师 费 用 昂贵 ， 而 且 当 你 刚刚 开始 创业 时 ， 并 没有 那么 多 钱 来 支配 。 

学 习 设 计 之 所 以 困难 ， 主 要 因为 设计 师 很 难 清楚 地 描述 其 做 设计 的 过 程 。 事 实 上 ， 很 多 设 
计 师 在 设计 上 有 一 定 的 天 赋 和 兴趣 ， 然 后 历经 无 数 的 练习 和 实验 ， 他 们 开创 出 了 自己 独特 的 设 
计 方 式 。 结 果 是 ， 现 在 的 很 多 设计 要 点 要 么 过 于 简单 ， 要 么 过 于 复杂 。 比 如 说 ， 有 没有 人 跟 你 
说 过 只 要 “运用 留 白 ”就 好 ? 如 果 你 没 听 懂 ， 那 她 可 能 只 会 符 管 肩 ， 说 自己 生 下 来 就 知道 如 何 
做 设计 。 

然而 事实 是 ， 设 计 背 后 真 的 存在 一 种 思维 过 程 一 一 决策 框架 。 例 如 ， 留 白 的 细微 差别 ， 实 
际 上 受到 几何 比例 的 影响 ， 这 一 点 我 将 在 第 5 章 中 谈 及 。 留 白 是 重要 的 构图 部 分 ,我 将 在 第 6 
章 中 解释 这 些 。 最 后 ， 留 白 可 以 使 得 重要 信息 更 加 明确 ， 我 将 在 第 7 章 中 介绍 这 一 点 。 
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我 希望 本 书 不 只 是 给 出 一 些 过 分 简化 的 设计 规范 ， 还 能 揭示 我 多 年 来 通过 实验 和 分 析 得 出 
的 系统 设计 思维 架构 一 一 就 连 与 开发 团队 合作 在 单个 周末 进行 快速 的 产品 开发 ， 或 在 资金 有 限 
的 情况 下 为 客户 提供 解决 方案 时 ,我 也 会 应 用 这 种 设计 思维 架构 。 通 过 对 设计 过 程 展开 “逆向 
工程 "， 我 希望 可 以 给 读者 足够 的 知识 来 应 对 各 种 不 同 的 情况 - 

如 果 你 想 学 习 如 何 独立 创造 伟大 的 设计 ， 如 果 你 想 提高 设计 素养 ， 仅 仅 掌握 设计 规范 是 行 
不 通 的。 因此 ， 我 要 为 你 开拓 全 新 的 视角 ， 让 你 重新 认识 世界 。 也 许 读 过 本 书 之 后 ， 你 对 自己 
接 下 来 的 设计 还 不 甚 满意 。 但 是 当 你 再 遇 到 喜欢 的 设计 时 ， 就 可 以 用 一 种 全 新 的 方式 去 领会 它 。 
你 会 明白 为 什么 这 种 字体 适合 这 种 主题 ， 你 会 明白 不 同 设计 单元 之 间 为 什么 是 这 种 比例 ， 你 会 
注意 到 设计 者 如 何 清晰 区 分 各 种 信息 片段 ， 你 会 理解 不 同 颜色 是 如 何 协调 和 表现 的 。 

这 就 是 我 为 黑客 社区 所 做 的 一 点 微薄 贡献 。 下 面 我 期 待 着 与 你 共同 分 享 。 
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第 2 章 


为 什么 需要 设计 
1.1 设计 到 底 是 什么 
1.2 设计 不 是 什么 
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2.3 ”视觉 设计 有 时 是 产品 优 
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第 3 章 排版 的 媒介 和 样 


3.1 误 用 的 悲剧 :; Comic Sans 字体 缘何 车 人 厌 
3.2 ”排版 的 束缚 : 不 变 的 文字 …… 
3.3 ”字母 表 的 组 成 
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为 什么 需要 设计 


既然 你 已 经 开始 阅读 本 书 ， 也 许 我 就 不 必 费 太 多 口舌 来 向 你 说 明 设计 是 多 么 重要 了 。 毫 无 
疑问 ， 良 好 的 设计 已 成 为 全 球 许多 大 公司 成 功 的 重要 因素 ， 而 且 在 过 去 几 十 年 里 ， 对 设计 的 兴 
趣 和 关注 度 呈 爆炸 式 增 长 。 但 设计 到 底 有 哪些 影响 呢 ? 进一步 讲 ， 什 么 限定 了 设计 的 范围 ? 

巧妙 运用 良好 的 设计 可 以 创造 打动 人 的 体验 。 同 时 ， 好 的 设计 可 以 通过 改进 的 交互 和 明晰 
程度 ， 让 产品 或 服务 更 易于 使 用 。 好 的 设计 可 以 提高 公司 的 信誉 度 ， 最 终 影响 客户 的 决策 。 巧 
妙 运用 好 的 设计 可 以 影响 受众 情感 ， 树 立信 誉 并 赢 取信 任 。 最 终 ， 良 好 的 设计 确实 能 让 产品 
或 服务 更 易于 使 用 。 但 要 真正 达到 这 些 效果 ， 需 要 全 面 地 理解 设计 。 

我 曾 在 世界 上 最 古老 的 一 个 仍 在 使 用 的 建筑 中 亲眼 目睹 了 设计 的 力量 。 当 时 ， 我 正在 罗马 
研究 现代 印刷 术 的 起 源 ， 我 的 工作 室 离 万 神殿 只 有 儿 个 街区 的 距离 。 我 在 万 神殿 里 坐 了 好 几 个 
小 时 ， 观 察 参观 者 。 我 一 般 对 观察 人 没有 兴趣 ， 但 坐 在 万 神殿 里 观察 别人 ， 有 一 种 与 在 其 他 地 
方 不 同 的 感觉 。 为 什么 ?因为 在 这 可 以 看 到 第 一 次 走 进 这 座 神 典 的 人 的 各 种 反应 。 

虽然 第 一 次 走 进 万 神殿 的 人 各 式 各 样 , 但 基本 上 遵循 一 个 可 预见 的 模式 : 手 里 拿 着 旅游 指南 ， 
脚 上 踏 着 舒服 的 运动 鞋 ， 急匆匆 地 跨 进 门 来 。 可 一 旦 抬头 看 上 一 眼 ， 他 的 举止 就 会 彻底 地 发 生 
变化 : 脚步 放 慢 ， 引 颈 仰 望 ， 就 像 第 一 次 看 到 烟花 的 孩子 目瞪口呆， 不 由 自主 地 “ 哇 ” 一 声 ， 
并 发 出 惊讶 的 叹息 声 ; 或 许 还 会 举 起 相机 ， 试 图 留 下 些 可 供 日 后 回味 的 影像 。 

这 就 是 我 喜欢 在 万 神殿 里 观察 人 们 的 原因 。 我 也 曾 有 着 和 他 们 一 样 的 体验 ， 当 然 万 神山 至 
今 仍 让 我 感到 非常 震撼 。 这 么 一 堆 按 特定 方式 排列 的 石头 ， 就 让 观 者 产生 了 这 么 强烈 的 反应 ， 
真是 件 神奇 的 事情 。 


1.1 设计 到 底 是 什么 


史 蒂 夫 "乔布斯 曾 说 过 :“ 在 多 数 人 的 字典 里 ， 设 计 是 虚 饰 ， 是 室内 装潢 ， 是 沙发 章 的 面料 。 
但 对 我 来 说 ， 设 计 是 根本 。 设 计 既 是 人 造物 的 固有 灵魂 ， 又 必然 会 经 由 产品 外 在 表现 层次 而 得 
以 体现 。” 以 万 神殿 为 例 ， 这 种 层次 ， 即 不 同 要 素 间 的 关联 性 ， 就 通过 外 在 的 视觉 效果 很 好 地 展 





现 出 来 

我 在 万 神殿 内 曾 
期 效果 。 公 元 126 年 ， 罗 马 皇 帝 哈 德 
罗马 的 全 体 神 只 。 所 以 ， 假 如 能 让 人 
适 不 过 一 一 换 名 话说， 如果 这 座 建筑 足以 讨 友 
凡夫 俗 子 叹为观止 。 有 
乔布斯 所 指 的 那 种 “ 















立 。 而 那 恰恰 是 建造 者 所 要 达到 的 预 
i 修建， 其 最 初 目的 是 为 了 供奉 古 
E 示 惊叹 ， 怕 是 与 最 为 合 
女神 维 纳 斯 ， 那 么 
计 背 后 的 意图 . 























通过 内 冲 的 概念 性 表现 ， 万 神殿 达成 了 设 9 效果 
哈 德 良 皇 人 都 充 刘 墙 休 加 上 半球 形 的 窟 
ad 成 完美 的 球 宽 相 同 ) 度 使 得 它 在 建成 近 两 二 1 年 


在 穹顶 的 有 一 个 直径 9 米 的 
圆 孔 ， 阳 光 通 过 加 孔 投 射 进来 ， 为 什么 万 神 + 人 如 此 大 的 震撼 的 
原因 。 进 入 殿内 ， 你 将 置身 于 另外 一 个 世界 ， 这 个 有 它 自 己 ( 见 图 1-1) 

万 神殿 的 部 分 震撼 效果 ， 来 自 这 种 不 可 思 信和 所 用 建造 材料 之 间 的 关系 。 为 了 
实现 这 种 造型 ， 万 神殿 将 所 用 材料 发 挥 到 了 极限 ， 这 为 什么 后 来 再 也 没有 用 同样 
度 的 穹顶 建筑 要 让 这 样 的 容 顶 屹立 不 倒 ， 加 固 手 段 非常 重要 ， 因 而 容 

有缘 只 有 1.2 米 厚 




















万 神殿 是 世界 上 最 高 
的 无 钢筋 混凝土 的 窜 
顶 建筑 。 光 ( 有 时 是 
雨 ) 从 穹顶 团 孔 倾注 
而 人 











为 了 更 好 地 控制 混凝土 的 重量 穹顶 基 
凝 土 越 轻 ， 到 圆 孔 处 便 只 用 到 了 浮石 。 在 六 
雪 撑 整个 穹顶 ， 而 轻薄 的 穹顶 上 部 又 减 
为 了 使 穹顶 材质 更 加 轻盈 ， 窟 项 内 壁 设 计 了 











系列 的 内 凹 方 格 ， 也 就 是 花 格 镶 板 。 花 格 灸 
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板 的 存在 既是 工程 的 需要 ,又 提升 了 殿内 的 设计 效果 。 花 格 镶 板 从 穹顶 圆 孔 整 齐 地 向 外 辐射 而 出 ， 
和 圆 孔 边缘 光滑 的 混凝土 内 壁 对 比 鲜明 ， 形 成 了 非常 有 趣 的 视觉 效果 。 
为 了 配合 这 些 技术 上 的 考虑 ， 万 神殿 的 设计 者 也 运用 了 一 些 美学 设计 。 殿 内 的 地 面 太 大 ， 
无 法 用 一 整 块 大 理 石 制 成 ， 因 此 便 用 各 种 各 样 的 大 理 石 块 拼接 而 成 。 这 些 大 理 石 块 以 基本 的 圆 
形 和 方形 排列 在 一 起 ， 与 殿内 的 其 他 几何 元 素 保持 了 协调 。 
并 且 万 神 典 内 所 用 的 大 理 石 都 有 着 不 同 的 颜色 ， 所 以 设计 师 必 须 巧妙 安排 ， 确 保 不 同 颜色 
的 石 块 之 间 的 搭配 和 相互 作用 能 绽放 出 和 谐 之 美 。 
所 有 这 些 元 素 巧 妙 地 结合 在 一 起 ， 使 万 神 典 成 为 建筑 史上 最 具 影响 力 的 建筑 之 一 。 从 圣 彼 
得 大 教堂 ( 位 于 梵蒂冈 城 ， 顺 着 万 神殿 旁 的 大 路 一 直 走 下 去 就 到 了 ) 到 美国 国会 大 厦 ， 世 界 各 
地 的 不 少 建筑 都 受到 了 万 神殿 设计 的 启迪 。 
所 有 设计 “层次 ”的 精心 结合 , 使 得 设计 漂亮、 永恒 , 并 最 终 实现 了 其 设计 目标 。 设 计 意图 、 
施工 技术 , 以 及 造型 、 几何 因素 以 及 颜色 之 间 的 和 谐 , 相得益彰 。 所 有 这 些 因素 、 所 有 这 些 层次 ， 
彼此 之 间 有 着 千 丝 万 缕 的 联系 ， 它 们 共同 构成 了 真正 的 设计 。 


1.2 设计 不 是 什么 


正如 史 蒂 夫 “乔布斯 所 说 ， 很 多 人 认为 设计 是 某 种 后 续 追 加 的 东西 一 一 比如 沙发 上 的 坐垫 ， 
名 片上 的 Logo， 折 或 网 站 上 按钮 的 外 观 。 许 多 抱 有 这 种 想法 的 人 ， 在 寻求 设计 真 谤 的 道路 上 越 
走 越 偏 。 他 们 可 能 会 去 学 习 如 何 制造 一 个 特殊 的 视觉 效果 ， 反 复 参 考 设计 准则 ， 或 者 在 设计 中 
添加 些 毫 无 用 处 反而 造成 混乱 的 视觉 元 素 - 

为 了 创作 好 的 设计 ， 你 需要 学 习 如 何 理解 创作 优秀 设计 所 涉及 的 所 有 层次 。 要 想 创作 良好 
的 设计 ， 那 么 请 记 住 : 别 只 会 画 小 马 。 

也 许 小 学 时 ， 你 们 班 里 就 有 这 么 一 个 被 大 家 当 作 画家 的 小 孩 。 他 最 大 的 秘密 是 ， 只 会 画 一 
种 东西 。 我 三 年 级 的 时 候 ， 班 上 就 有 一 个 会 画 小 马 的 女孩 。 她 可 以 画 出 漂亮 的 马 。 这 些 马 儿 有 
着 水 汪汪 的 大 眼睛 ， 长 长 的 、 标 逸 的 聚 毛 ， 以 及 光滑 的 、 强 有 力 的 肌肉 ， 一 个 个 跃然 纸 上 。 班 
上 的 其 他 孩子 总 是 簇拥 着 看 她 画 完 一 个 又 一 个 。 忽然 有 一 天 ,有 个 孩子 想 要 她 给 自己 绘 张 像 。“ 画 
下 我 吧 ! ” 那 小 孩 说 。 女 孩 看 起 来 很 惊慌 。 其 他 孩子 跟着 起 哄 :“ 对 ， 夯 吧 。” 她 不 情愿 地 开始 
给 小 男孩 画像 ， 结 果 那 画像 一 点 都 不 像 那 小 男孩 。 眼 睛 毫 无 生气 ， 像 泄 了 气 的 足球 ， 头发 也 是 
胡乱 的 涂鸦 。“ 我 不 是 很 善于 画 人 像 。” 女 孩 着 性 地 说 。 和 孩子 们 看 起 来 都 很 失望 ， 但 是 仍然 想 相 
信 她 是 一 个 好 画家 。 

小 时 候 我 弄 不 懂 她 为 什么 会 出 现 这 种 反差 ， 长 大 后 我 明白 了 。 她 画 的 所 有 小 马 基本 上 都 是 
一 样 的 : 它们 大 多 数 姿势 相同 , 头 的 角度 也 一 样 。 每 个 小 马 的 前 蹄 都 腾 起 , 像 是 准备 好 了 去 飞 奔 。 
她 可 能 是 看 到 了 某 份 杂志 的 照片 ， 从 而 学 会 了 怎么 画 一 两 种 角度 下 的 小 马 ， 剩 下 的 仅仅 是 一 个 
接 一 个 地 重复 而 已 。 她 不 过 是 善于 以 这 种 方式 来 画 马 。 

然而 这 个 女孩 并 没有 真正 理解 马 。 她 没有 和 弄 懂 组 成 马 的 “层次 "。 不 过 ， 她 才 小 学 三 年 级 而 
已 ,可 以 理解 。 她 不 懂 马 解 谭 学 ， 就 不 知道 马 的 肌肉 分 布 ， 也 不 知道 马 变化 姿势 时 肌肉 形状 会 
如 何 改变 。 
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她 画 不 好 同学 也 是 因为 她 不 懂 人 体 解 剖 学 。 她 不 知道 泪腺 是 眼睛 内 部 的 组 成 部 分 ， 不 知道 
眼皮 是 怎么 构成 的 ， 也 不 知道 眼皮 是 如 何 折 缩 在 眉 骨 之 下 。 她 不 知道 人 的 头发 是 怎样 相互 缠绕 ， 
一 徐 簇 地 长 在 一 起 的 。 她 既 不 懂 这 些 事物 运作 的 科学 原理 ， 也 不 懂 观 者 会 如 何 感知 这 些 事物 ， 
自然 也 就 不 懂 如 何 用 纸 和 笔 来 为 这 两 个 世界 架 起 沟通 的 桥梁 。 

当然 ， 她 可 以 不 懂 这 些 事情 一 一 她 只 是 个 三 年 级 学 生 而 已 。 但 可 能 有 朝 一 日 ， 她 会 成 长 为 
一 名 画家 ,或 者 今天 她 已 经 是 最 著名 的 绘 马 画家 了 。 

若 要 真正 善于 设计 某 样 事物 ， 就 必须 懂得 它 的 运作 方式 。 你 必须 理解 自己 所 要 创造 事物 的 
本 质 ， 别 人 会 如 何 感知 它 ， 以 及 如 何 运用 手中 的 工具 来 实现 心中 所 想 。 否 则 ， 你 并 不 是 在 设计 ， 
而 只 是 在 制作 一 个 徒 有 其 表 的 外 壳 ， 像 小 女孩 那样 画 小 马 。 你 可 别 只 会 画 小 马 呀 。 


1.3 设计 的 “层次 ” 


设计 者 必须 要 对 设计 的 层次 构成 有 很 好 的 认识 ， 因 为 要 想 创作 美观 实用 并 最 终 能 打动 用 户 
的 设计 ， 关 键 就 在 于 协同 设计 好 各 个 层次 。 

比 起 其 他 领域 ， 恰 当地 使 用 设计 的 各 层 对 Web 设计 的 成 功 尤为 关键 。 今 天 人 们 接触 的 信息 
比 以 往 多 得 多 ， 可 并 没有 足够 的 时 间或 精力 去 处 理 它 们 。 所 以 ， 我 们 使 用 快捷 的 方法 来 决定 哪 
些 信息 值得 我 们 花费 宝贵 的 精力 。 

在 心理 学 上 ， 这 些 快捷 的 方法 被 称 为 启发 法 。 借 助 这 些 启发 法 ， 人 们 能 够 运用 人 类 进化 过 
程 所 固化 的 或 从 经 历 中 学 到 的 “规则 "， 来 解决 复杂 问题 ， 制 定 复杂 决策 。 

如 果 在 购物 时 看 到 一 双 鞋 子 ,你 会 立刻 做 出 判断 ,这 个 牌子 的 鞋 是 不 是 适合 你 。 外 形 怎么 样 ? 
颜色 是 否 有 吸引 力 ? 风格 与 你 搭 调 么 ?你 会 根据 这 双 鞋 和 以 往 曾经 买 过 的 鞋子 的 相似 度 ， 使 用 
启发 法 做 出 决定 。 

在 网 络 上 ， 人 们 也 大 量 使 用 各 种 启发 法 制定 决策 。 比 如 .我们 可 以 瞬间 判断 出 ， 电 商 网 站 
处 理 我 们 付款 是 否 安全 可 信 。 

事实 证 明 ， 在 所 有 这 些 情况 下 ， 当 判断 一 个 网 站 是 否 可 信 时 ， 设 计 是 我 们 所 用 到 的 最 重要 
的 启发 法 ( 没有 之 一 )- 

影响 设计 的 因素 不 计 其 数 ， 而 且 界限 模糊 。 如 果 问 上 十 几 位 设计 专家 “一 件 设计 会 受 哪些 
因素 影响 "， 尽 管 会 得 到 十 几 种 不 同 的 答案 ， 但 几乎 都 涵盖 了 同样 的 内 容 。 在 这 本 书 中 ， 我 会 谈 
谈 下 面 这 些 设计 中 的 “层次 ”。 


1.3.1 目的 


每 件 设计 都 有 其 目的 或 者 意图 。 万 神 磺 被 建造 为 众 神 的 庙宇 ，iPod 作为 便携 式 音乐 播放 器 
而 生 ， 同 样 每 个 网 站 或 者 应 用 程序 的 存在 也 都 有 自己 的 目的 。 

设计 的 目的 也 和 经 济 因素 相关 联 。 字 母 的 样式 一 直 受 语言 传播 效率 的 需求 影响 ( 参见 第 3 
章 ),。 我 将 在 第 2 章 中 说 明 ， 这 些 经 济 因素 有 助 于 控制 设计 的 质量 ， 而 且 这 已 在 Fogg 的 研究 中 
得 到 证 明 一 一 参与 者 对 漂亮 得 不 恰当 的 网 站 持 怀疑 态度 ( 请 参见 下 面 的 补充 内 容 “在 网 络 上 ， 
设计 如 何 影响 可 信和 度 ” )。 
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设计 的 目的 及 意图 与 用 户 的 需求 及 特征 有 着 一 定 的 相互 作用 和 影响 。 第 2 章 将 探讨 如 何在 
做 结构 设计 时 更 好 地 迎合 用 户 特性 ， 第 9 章 将 会 介绍 如 何 应 对 色彩 的 文化 因素 。 

每 个 用 户 都 能 清楚 地 获取 信息 ， 这 种 传达 就 是 设计 的 基础 。 在 第 3 章 ， 我 会 在 历史 背景 下 
解释 各 种 字体 的 差异 。 附 录 A 会 解释 历史 因素 如 何 影响 字体 传达 的 气氛 ， 附 录 B 将 展示 一 些 非 
常 细微 的 排版 细节 如 何 对 要 传达 的 信息 产生 巨大 的 影响 。 最 重要 的 是 , 第 7 章 将 说 明 如 何 给 予 
设计 中 的 各 种 信息 适当 的 重点 。 


1.3.2 ”媒介 和 技术 


每 件 设计 作品 都 是 使 用 一 定 的 创作 手法 ， 由 一 系列 特定 材料 创建 的 。 由 于 混凝土 帘 项 的 条 
件 限 制 ， 万 神殿 的 整个 穹顶 都 配 有 内 嵌 的 方 格 。 最 新 的 MacBook Pro 采用 了 一 体 化 铝 制 外 壳 ， 
这 就 是 制造 上 的 考虑 对 产品 设计 产生 了 影响 。 第 4 章 还 将 提 到 ， 由 HTML 和 CSS 构建 的 设计 往 
往 都 有 某 些 特点 ， 这 使 得 这 些 设计 受 限于 所 用 技术 的 功能 和 限制 

在 第 4 章 中 ,我 将 更 为 详细 地 阐述 互联 网 背后 的 技术 如 何 打造 设计 趋势 ， 比 如 Web 2.0 的 
外 观 。 第 3 章 将 说 明 由 于 像素 的 限制 ， 一 些 历 史 悠久 的 字体 设计 为 何 并 不 适用 于 网 络 。 第 8 章 
将 介绍 在 为 不 同 媒介 或 信息 图 形 挑选 颜色 时 ,色彩 呈现 技术 怎样 影响 我 们 的 选择 。 附录 A 将 解释 ， 
创作 字符 的 各 种 技术 是 如 何 创建 出 各 种 新 字体 样式 的 。 


1.3.3 ”审美 选择 


与 设计 意图 及 媒介 和 特性 相 呼应 的 ， 是 设计 的 审美 考虑 。 听 到 这 个 词 时 ， 你 可 能 会 想起 大 
部 分 人 所 认为 的 设计 一 一 外 表 虚 饰 。 但 是 在 很 多 方面 ， 设 计 的 审美 选择 并 不 是 可 见 的 。 

设计 中 各 元 素 之 间 的 几何 关系 不 太 容易 察觉 ， 但 是 它们 对 视觉 和 谐 、 内 容 组 织 的 感觉 以 及 
设计 的 整体 “简洁 ”程度 ， 都 有 着 巨大 的 影响 。 我 将 在 第 5 章 讨论 这 些 隐 藏 的 几何 关系 ， 并 在 
第 6 章 讨论 如 何 把 这 些 几 何 关系 和 其 他 隐 性 的 设计 准则 结合 起 来 。 

设计 中 所 使 用 的 颜色 当然 是 可 见 的 。 但 是 设计 师 在 使 用 颜色 时 会 做 出 一 些 重要 且 不 可 见 的 
选择 。 第 8 章 将 解释 人 们 如 何 使 用 视觉 系统 感知 颜色 ， 以 及 如 何 使 用 各 种 技术 呈现 颜色 ， 之 后 
的 第 9 章 ， 将 说 明 颜 色 如 何 影响 我 们 的 情绪 ， 以 及 颜色 之 间 如 何 相互 影响 ， 另 外 我 还 将 给 出 一 
些 各 颜色 融洽 搭配 的 常用 规则 。 


在 网 络 上 ， 设 计 如 何 影响 可 信 度 


在 斯 坦 福 大 学 的 一 项 研究 中 ，B. J Fogg 和 他 的 同事 向 参与 者 展示 了 两 个 网 站 ， 委 求人 们 对 
网 站 的 可 信 度 进行 排名 ， 并 解释 排名 依据 。 

在 处 理 调查 结果 的 过 程 中 ，Fogg 发 现 ， 礁 与 者 在 评定 网 站 可 信 度 时 ，。 设 计 对 他 们 的 判断 有 
着 非常 重要 的 影响 。 在 人 们 的 评价 中 ， 认 为 网 站 可 信 度 和 设计 有 关 的 评价 就 达到 了 惊人 的 46%- 
人 们 认为 可 信 的 网 站 “看 上 去 更 专业 "、“ 高 品质 的 外 现 和 感觉 ,或 者 “就 是 (看 上 去 ) 更 可 靠 "。 
一 些 参与 者 甚至 明确 提 到 了 那些 看 上 去 可 靠 的 网 站 配色 和 字体 -。 


es 


第 1 章 为 什么 需要 设计 


设计 良好 的 网 站 享有 较 高 的 可 信 度 评级 ， 设 计 粗 淄 的 网 站 被 视 为 缺少 可 信 度 。 如 果 一 个 网 
站 “看 上 去 不 怎么 专业 ”"、“ 设 计 草率 马虎 "， 或 者 看 起 来 “ 像 五 分 钟 做 出 来 的 "， 那 么 和 参与 者 就 
不 会 信任 它 

但 是 ， 正 如 只 会 画 漂亮 的 小 马 并 不 能 让 你 成 为 好 了 画家， 同样， 只 会 构建 一 个 炫丽 的 网 站 也 
不 能 让 你 成 为 好 的 设计 师 。 参 与 者 对 过 分 粮 丽 的 网 站 也 持 怀疑 态度 ， 给 出 了 负面 评价 ， 认 为 这 
种 网 站 看 上 去 像 是 “营销 团队 设计 的 ” 

网 站 设计 必须 恰到好处 ， 创 作 草 越 设计 的 关键 就 在 于 兼顾 构成 优秀 设计 的 所 有 层次 

除了 视觉 效果 对 网 站 可 车 性 有 着 非常 重要 的 影响 外 ，Fogg 的 研究 结果 还 表明 ， 设 计 中 的 一 
些 更 加 细微 的 方面 也 非常 重要 。 在 研究 中 ， 关 于 信息 设计 和 网 站 结构 的 评价 数量 位 居 第 二 ， 在 
所 有 评价 中 的 比例 超过 28%。 一 些 网 站 因 “ 结 构 清晰 ”而 受到 泰 与 者 的 称 鞠 ,而 其 他 网 站 则 因 
为 “信息 星 现 方式 精 硅 ”而 备 受 批评 

所 以 ， 在 关于 参与 者 信任 网 站 与 否 的 研究 中 ， 网 站 视觉 效果 加 上 信息 组 织 方式 ， 占 评价 总 
数 近 75%， 另外， 参与 者 对 不 适合 网 站 的 设计 很 敏感 

用 户 知 道 你 什么 时 候 在 “ 画 小 马 "， 所 以 和 要 创作 成 功 的 设计 ， 就 需要 了 解 设计 各 层 之 间 是 如 
何 互相 影响 的 





1.4 小 结 


理解 了 影响 设计 的 各 种 因素 ， 你 就 可 以 创作 出 能 够 打动 人 、 清 晰 明确 且 美观 大 方 的 设计 。 
在 本 书 的 其 余部 分 ,我 会 将 所 有 这 些 因素 分 解 开 来 ， 这 样 你 就 可 以 通过 全 新 的 视角 来 审视 设计 。 
让 我 们 开始 吧 ， 好 吗 ? 


第 章 


设计 的 目的 


设计 是 组 成 产品 的 众多 不 同 “层次 ”的 表现 。 所 以 ， 有 些 东西 可 能 只 是 显得 不 错 ， 但 却 未 
必 能 成 为 “好 ”的 设计 。 好 的 设计 对 这 些 “ 层 次 ”很 敏感 ， 而 这 些 层次 会 影响 产品 的 最 终 设计 。 
织物 的 图 案 ， 甚 至 网 站 上 按钮 的 图 形 样式 ， 这 些 常 被 误解 为 是 设计 ， 但 实际 上 都 和 设计 的 定义 
相去 甚 远 。 视 觉 特 性 当然 是 设计 的 组 成 部 分 但 设计 是 诸多 因素 的 产物 。 

设计 和 其 他 相关 学 科 之 间 没 有 鲜明 的 界限 ， 就 本 书 而 言 ， 我 主要 讨论 视觉 设计 。 视 觉 设计 
关乎 产品 的 视觉 外 观 ， 或 者 说 “美观 "。 顾 名 思 义 ， 它 主要 是 和 你 能 看 到 的 东西 有 关 ， 比 如 设计 
元 素 布局 、 排 版 效果 或 者 颜色 选择 ， 但 这 些 又 都 受 一 些 非常 具体 的 东西 影响 ， 如 产品 目的 、 文 
化 或 技术 。 

在 后 面 几 章 里 ， 我 将 详细 地 阐述 这 些 设计 因素 。 第 3 章 和 第 4 章 将 解释 在 历史 进程 中 ， 文 
化 和 技术 是 如 何 影响 排版 和 设计 的 。 第 5 章 和 第 6 章 将 介绍 隐藏 的 几何 和 组 合力 量 ， 如 何在 设 
计 中 创造 出 秩序 感 和 有 趣 的 视觉 效果 。 第 7 章 分 解 这 些 设计 因素 ， 阐 述 每 一 项 如 何在 设计 布局 
中 创造 出 视觉 上 的 秩序 感 。 第 8 章 和 第 9 章 将 讲解 我 们 是 如 何 感知 颜色 的 ， 如 何 借助 各 种 技术 
来 组 织 和 呈现 颜色 ， 以 及 这 两 者 如 何 与 我 们 的 文化 及 色彩 认 知 反应 相互 影响 。 最 后 ， 在 附录 中 ， 
我 将 通过 不 同 的 字体 和 排版 规范 的 微妙 细节 来 说 明 一 些 排版 效果 。 

通过 “逆向 工程 ”的 角度 来 透彻 地 理解 优秀 设计 因素 ， 你 的 设计 探索 之 路 将 更 加 顺畅 。 视 
觉 设计 将 不 再 只 是 有 天 赋 者 的 看 似 随 性 的 神秘 作品 。 就 像 金 门 大 桥 所 彰显 的 结构 要 素 一 样 ， 你 
将 能 够 洞察 所 有 设计 决策 的 结构 ， 无 论 其 设计 作品 是 永恒 之 美 ， 还 是 刚好 够 用 。 

但 这 方面 的 知识 是 不 可 能 从 类 似 “优秀 设计 诀 穿 "、“ 前 十 榜 "， 或 “好 设计 简明 法 则 ”之 类 
的 东西 中 获得 的 。 这 些 方式 很 少 有 效 ， 而 且 也 不 会 让 你 达到 那 种 高 度 。 相 反 ， 我 希望 为 各 位 提 
供 一 种 全 新 的 视角 .让 你 注意 到 此 前 从 未 注意 过 的 东西 。 你 会 发 现 微妙 的 弧度 能 使 一 种 字体 看 
起 来 严肃 ， 又 能 让 另 一 种 字体 显得 俏皮 活泼 ( 参见 附录 A )。 你 也 会 开始 注意 隐藏 的 几何 关系 ， 
大 片 留 白 能 使 某 些 设计 变 得 活 泌 有 生气 ， 却 让 另 一 些 变 得 死板 呆滞 ( 参见 第 5、6、7 章 )。 颜 色 
也 不 再 那么 神秘 ， 你 将 开始 明白 它们 如 何 相互 影响 ， 根 据 彼此 的 关系 改变 突出 程度 和 意义 ( 参 


第 2 章 设计 的 目的 


见 第 9 章 )。 你 甚至 可 以 在 没有 视觉 参考 的 前 提 下 ， 告 诉 朋 友 颜色 #8989FC 和 #89CCFF 的 差异 
(参见 第 8 章 )。 

我 尽 可 能 为 新 的 视角 提供 些 准 则 。 视 觉 设 计 恰巧 有 一 些 非常 好 的 规则 。 但 更 重要 的 是 ,我 
希望 为 你 今后 的 成 长 打下 一 个 良好 基础 。 将 来 你 可 以 用 视觉 词汇 来 阐明 那些 你 认为 漂亮 ， 抑 或 
不 是 很 漂亮 的 设计 。 你 将 能 够 非常 熟练 地 分 析 TechCrunch“ 初 创 企业 ”板块 着 陆 页 的 设计 ， 就 
如 同 在 古 根 海 姆 诠释 莫 奈 的 画作 一 般 - 但 在 开始 了 解 视觉 设计 各 方面 之 前 ， 我 们 首先 需要 对 与 
视觉 设计 有 关 及 塑造 视觉 设计 的 因素 有 一 定 了 解 - 


2.1 视觉 设计 与 用 户 体验 设计 的 关系 


在 网 站 或 应 用 程序 设计 中 ,视觉 设计 是 用 户 体验 设计 的 组 成 部 分 之 一 。 用 户 体验 设计 涉及 
产品 与 用 户 交互 的 方方面面 。 用 户 体验 设计 试图 让 产品 令 人 难忘 ， 且 易于 使 用 ， 并 会 包含 若干 
设计 原则 ， 如 易 用 性 。 

图 2-1 显示 了 在 ( 网 站 和 应 用 程序 ) 用 户 体验 设计 中 ,视觉 设计 与 其 他 设计 原则 的 关系 图 。 
我 们 可 以 看 到 ， 视 觉 设计 与 产品 的 内 容 和 易 用 性 交织 在 一 起 。 产 品 内 容 自然 是 视觉 设计 师 真正 
想 要 盖 明 的 东西 ， 而 易 用 性 强烈 地 影响 着 视觉 设计 ， 确 保 最 终 用 户 能 够 有 效 地 使 用 该 产品 。 


图 2-1 
视觉 设计 是 用 户 体验 
设计 的 组 成 部 分 ， 并 
用 户 体验 设计 受到 用 户 体验 设计 其 
他 原则 和 组 成 部 分 的 
影响 





这 张 图 进行 了 简化 处 理 ， 其 实用 户 体验 设计 中 还 包含 很 多 和 这 些 原则 重奏 的 其 他 原则 。 比 
如 交互 设计 、 人 机 交互 、 信 息 架 构 、 认 知心 理学 以 及 人 为 因素 ,这 些 都 在 用 户 体验 设计 中 起 到 
了 重要 作用 。 虽 然 本 书 也 会 讨论 其 他 领域 ( 像 建筑 和 工业 设计 ) 的 作品 ,但 在 分 析 用 户 体验 设 
计 和 视觉 设计 之 间 的 关系 时 ,它们 都 不 在 讨论 之 列 。 


2.1.1 用户 体验 设计 基础 要 素 
产品 的 用 户 体验 设计 本 质 上 是 介 于 产品 意图 和 用 户 特征 之 间 的 。 正 是 用 户 体验 的 基础 刻 造 


黑客 与 设计 : 剖析 设计 之 美的 秘密 


了 产品 ， 从 根本 上 约束 了 视觉 设计 决策 。 

如 果 由 我 来 设计 一 把 锤子 ,那么 它 的 用 途 会 是 钉 钉 子 ， 偶 尔 也 可 能 用 来 拔 钉子 。 然 后 我 会 
对 锤子 的 用 户 做 一 番 假 设 一 一 但 愿 预 算 允 许 我 做 些小 小 的 研究 以 落实 这 些 假设 。 如 果 用 户 用 手 
作业 ， 我 就 会 为 锤子 设计 一 个 手柄 。 考 虑 到 把 钉子 钉 人 木头 需要 一 定 的 力度 ， 我 会 让 锤子 头 足 
够 坚硬 、 沉 重 。 有 时 很 难 准确 地 项 中 钉子 ， 为 此 锤子 头 要 足够 大 ， 以 减少 失误 ， 又 得 足够 小 以 
免 太 沉 而 不 利于 挥动 。 

现在 ， 锤 子 的 雏形 就 出 来 了 : 一 头 带 有 重 物 的 棍子 。 但 这 依然 有 改进 的 空间 。 通 过 对 原型 
的 测试 ， 我 可 能 会 注意 到 ， 在 没有 准确 敲 中 钉子 时 ， 锤 头 容易 扭 动 ， 因 此 我 会 仔细 均匀 地 平衡 
重量 。 现 在 , 锤 头 不 仅 有 项 钉子 的 一 头 ， 而 且 还 有 另 一 头 来 平衡 重量 。 这 样 就 可 以 完美 地 把 拨 
钉子 的 功能 结合 到 锤 头 的 另 一 头 上 。 

我 会 尝试 各 种 不 同 的 材料 ， 最 终 发 现在 合适 的 价格 范围 内 ， 钢 锤 头 能 满足 耐用 性 的 需求 。 
至 于 把 手 ， 我 会 发 现 木 制 把 手 够 便宜 、 质 轻 ， 并 且 有 相当 好 的 减 震 效果 。- 

在 考虑 产品 目的 和 用 户 需 求 的 过 程 中 ， 我 完成 了 锤子 的 基本 设计 。 锤 子 是 殴 钉 子 和 拔 钉子 
的 绝 佳 工具 ， 正 如 老话 常 说 的 那样 ， 当 你 拿 着 一 把 锤子 ,“ 任 何 东 西 看 起 来 都 像 钉 子 "。 

更 复杂 的 需求 因素 可 能 会 推进 锤子 的 设计 。 也 许 竞 争 对 手 也 出 售 类 似 的 锤子 ， 我 就 得 想 办 
法 让 我 的 锤子 与 众 不 同 ， 并 让 其 更 加 好 用 。 通 过 跟 客户 交流 ， 我 可 能 会 发 现 一 些 客户 抱怨 用 我 
的 锤子 钉 了 一 天 钉子 后 会 感到 不 适 ， 那 么 我 就 会 尝试 各 种 不 同 的 材料 ， 如 玻璃 纤维 ， 来 寻找 最 
佳 的 减 震 效 果 。 可 能 一 些 客户 在 抓 提 手柄 时 感到 吃力 ， 为 此 我 可 能 会 尝试 使 用 橡胶 手柄 ， 并 根 
据 人 们 的 手 型 对 把 手 塑 型 处 理 ， 以 便 更 好 的 把 握 

我 创造 锤子 的 整个 过 程 都 属于 用 户 体验 设计 范畴 。 我 不 仅 为 客户 设计 了 产品 ， 而 且 还 根据 
他 们 的 需求 做 了 优化 ， 提 高 了 产品 的 市 场 竞争 力 


2.1.2 视觉 设计 对 比 


上 面 这 些 因 素 只 会 稍微 影响 锤子 的 视觉 设计 。 如 果 你 在 www.homedepot.com 上 搜索 "锤子 ”， 
会 得 到 上 百 条 搜索 结果 。 听 起 来 可 能 很 多 ,但 不 同类 型 的 锤子 适用 于 不 同 的 情形 。 有 用 于 和 钉 钉 
子 和 拔 钉 子 的 传统 锤子 ， 有 用 于 金属 加 工 的 圆 头 锤 ， 有 用 于 安装 、 印 除 瓦 片 的 压 紧 锤 ， 还 有 其 
至 不 能 称 为 锤子 的 锤子 ， 比 如 头 部 大 而 钝 的 木 析 ， 以 及 安装 篇 秃 桂 的 打桩 器 。 有 些 锤子 则 在 比 
拼 材 质 ( 比如 有 全 钢 的 锤子 ) 和 价格 ( 从 2 美元 到 50 美元 不 等 ) 

但 锤子 在 视觉 设计 上 差异 并 不 大 。 而 相 比 之 下 ， 另 一 种 用 途 明确 单一 的 简单 发 明 一 一 鞋子 ， 
在 视觉 设计 方面 有 着 极 大 的 差异 。Zappos.com 上 销售 一 干 多 种 品牌 的 鞋 ， 每 个 品牌 都 有 各 种 各 
样 的 款式 。 当 然 ， 就 像 锤子 一 样 ， 不 同 的 场合 对 应 不 同 的 鞋 ,但 许多 款式 的 鞋子 又 有 多 种 颜色 
可 选 。 

显然 ,视觉 设计 的 重要 性 对 卖 鞋 和 卖 锤子 来 说 是 有 区 别 的 ,原因 有 很 多 ,比如 ,鞋子 是 消耗 品 ， 
即使 人 一 次 只 能 穿 一 双 鞋 一生 中 也 会 穿 上 好 几 十 双 鞋 。 锤子 的 寿命 会 长 很 多 一 一 这 取决 于 你 
用 锤子 的 频率 ， 它 可 能 会 陪伴 你 一 生 。 另 外 ,我 们 每 天 都 会 穿 鞋 ， 而 很 多 人 可 能 都 没有 自己 的 
锤子 。 
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但 有 一 个 根本 的 区 别 在 于 我 们 与 鞋 的 交互 方式 : 鞋 和 我 们 的 个 人 身份 有 着 非常 紧密 的 联系 。 
我 们 将 鞋 直接 穿 在 脚 上 ， 走 路 时 所 有 人 都 能 看 到 它 。 鞋 是 时 尚 的 一 部 分 ， 虽 然 时 尚 转瞬 即 变 ， 
并 且 反 复 无 常 但 正 是 主要 因为 这 个 原因 ， 我 们 才 需 要 各 种 各 样 的 鞋子 设计 ， 而 不 是 各 种 锤子 
设计 。 

视觉 设计 已 经 成 为 鞋子 的 重要 卖点 。 制 鞋 企业 创新 鞋子 的 方法 ， 可 以 尝试 的 只 有 这 么 多 。 
他 们 可 以 尝试 不 同 的 材质 和 不 同 的 款式 ， 可 以 在 鞋 内 加 入 气垫 或 者 加 上 高 跟 ， 可 以 改变 鞋底 的 
厚度 ， 甚 至 设计 成 分 趾 的 样子 。 最 终 ， 无 论 消 费 者 是 否 承认 ， 在 他 们 挑选 鞋子 时 ， 视 觉 设 计 都 
是 非常 重要 的 考虑 因素 。 然 而 ， 挑 选 锤子 时 ， 视 觉 设 计 显 然 就 不 是 多 么 重要 了 。 市 场 已 经 证 明 
了 这 一 点 。 


2.2 ”有 时 视觉 设计 够 用 即 好 


在 前 面 小 节 中 ,我 说 明了 不 同 产品 视觉 设计 重要 性 不 同 。 下 面 我 要 指出 : 尽管 你 我 都 热爱 
设计 ， 但 成 功 的 产品 并 不 总 是 需要 引 人 注 目的 视觉 设计 。 产 品 是 否 需 要 引 人 注 目的 视觉 效果 ， 
取决 于 市 场 。 

以 单枪匹马 就 使 得 数 百 家 报 纸 和 分 类 广告 公司 破产 的 Craigslist 为 例 ，Craigslist 的 视觉 设计 
很 丑 (或 者 说 根本 就 没有 视觉 设计 )。 为 了 使 Craigslist 前 端 页 面 更 具 吸 引力 ， 人 们 曾 做 过 很 多 
尝试 ， 甚 至 干脆 重新 设计 ， 但 Craigslist 的 设计 依然 极其 简陋 ， 只 有 定期 的 小 调整 。 即 使 这 样 ， 
Craigslist 仍 可 年 入 近 1.5 亿美 元 。 

Craigslist 的 成 功 可 以 归功 于 其 好 用 的 功能 ,解决 了 市 场 中 极其 理 手 的 问题 。 以 前 ， 如 果 你 
想 寻 找 室友 、 出 售 汽车 或 者 寻 更 约会 ， 就 必须 拿 起 电话 给 那些 坐 在 高 大 办 公 楼 里 面 的 大 型 报 业 
公司 的 人 打 电 话 ， 并 付 钱 发 布 广告 ， 这 听 上 去 仿佛 有 点 原始 吧 。 由 于 按 行 收费 ， 所 以 想 要 省 钱 
的 话 ， 就 得 让 广告 尽量 短 。 然 后 就 是 等 待 。 如 果 够 幸运 ， 你 的 广告 第 二 天 就 能 发 布 ， 紧 接着 就 
开始 接 电话 。 在 找到 室友 、 卖 出 汽车 或 者 更 得 约会 对 象 之 后 ， 你 还 会 不 停 地 接 到 电话 ， 有 时 会 
持续 几 个 星期 ， 因 为 你 的 广告 还 在 ， 而 你 却 不 能 把 它 撤 下 来 。 

但 Craigslist 用 更 好 用 的 产品 改变 了 这 一 切 。 最 让 人 惊讶 的 是 , 它 的 产品 (大 部 分 功能 类 别 ) 
现在 仍然 是 免费 的 。 因 此 Craigslist 不 需要 优美 的 设计 也 就 不 足 为 奇 了 。 事 实 上 ， 这 种 粗糙 的 设 
计 激 起 了 社区 驱动 、 反 大 公司 和 草根 主义 的 精神 。 通 过 使 用 这 种 粗糙 、 社 区 驱动 的 网 站 ， 人 们 
表达 了 对 那些 多 年 来 赚 取 他 们 金钱 、 企 业 形象 光鲜 靓丽 的 商业 报纸 的 不 满 。 


2.3 视觉 设计 有 时 是 产品 优势 


当然 ，Craigslist 是 个 特例 ， 而 且 它 的 市 场 份额 正在 被 面向 各 类 领域 的 服务 网 站 所 蚕食 。 比 
如 ，AirBNB ( www.airbnb.com )、TaskRabbit ( www.taskrabbit.com ) 和 oDesk ( www.odesk.com ), 
这 些 网 站 都 针对 其 特定 垂直 市 场 的 需求 提供 解决 方案 ， 并 且 拥 有 更 吸引 人 的 视觉 设计 。 

没有 比 苹 果 从 设计 中 受益 更 多 的 公司 了 。1997 年 ， 在 离开 苹果 12 年 之 后 ， 史 蒂 夫 ' 乔布斯 
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回归 苹果 ,挖掘 出 了 乔纳森 ' 艾 维 以 及 由 其 领导 的 此 前 未 受 充 分 重视 的 设计 研究 室 。 自 那 时 起 ， 
苹果 就 开始 向 世人 推出 了 一 款 又 一 款 设计 绝妙 的 创新 产品 ， 并 获得 了 巨大 成 功 。 现 今 ， 苹 果 已 
成 为 世界 上 最 大 的 科技 公司 ， 是 其 1997 年 时 市 值 的 百倍 之 多 。 

通过 发 布 一 款 又 一 款 绝 佳 产品 .苹果 取得 了 惊人 的 成 功 ， 但 要 说 起 为 这 成 功 葛 下 坚实 基础 
的 产品 ， 当 然 要 说 是 iPod。 在 iPod 之 前 ， 只 有 少数 狂热 的 果 粉 会 追捧 苹果 优雅 的 设计 ， 这 就 好 
比 是 说 ， 苹果 造 的 锤子 非常 棒 ， 但 因为 价格 贵 得 离谱 ， 只 有 很 少 人 能 够 用 上 ， 而 iPod 却 改变 了 
一 切 ， 它 使 得 性 能 优异 的 苹果 产品 在 价格 上 显得 更 为 亲民 。 

自 iPod 发 布 以 来 ， 苹 果 公 司 的 股价 超出 了 微软 股价 的 30 倍 以 上 一 一 iPod 在 其 中 发 挥 了 巨 
大 的 作用 。 当 时 ，Windows 系统 的 电脑 占据 了 个 人 电脑 市 场 98% 的 市 场 份额 ; 而 现在 ， 苹 果 在 
个 人 电脑 市 场 中 的 份额 翻 了 3 倍 ， 超 过 7%， 并 且 由 于 iPad 的 推出 ， 使 得 苹果 几乎 占据 了 平板 
电脑 市 场 近 95% 的 份额 。 

iPod 诞生 之 时 ， 大 多 数 人 用 电脑 做 的 事情 和 今天 差不多 : 上 网 和 编写 文档 。 当 时 ， 由 于 微 
软 的 Office 套件 在 办 公 软 件 市 场 占 主 导 地 位 ， 对 于 企业 来 说 非常 重要 ， 因 此 几乎 不 可 能 让 用 户 
切换 到 Mac 平台 上 来 。 于 是 ， 苹 果 转 攻 更 感性 的 音乐 方向 。 

“音乐 是 每 个 人 生活 的 一 部 分 。 对 ,每 个 人 。 音 乐 一 直 陪伴 着 我 们 , 也 仍 将 一 直 在 我 们 身边 。” 
史 蒂 夫 “乔布斯 在 2001 年 发 布 iPod 时 说 道 。 那 时 ， 人 们 在 电脑 上 听 音 乐 已 有 好 几 年 了 ， 但 是 
便携 式 数字 音乐 播放 器 市 场 才刚 刚 兴起 。 在 iPod 推出 之 时 ,市场 上 的 许多 播放 器 都 庞大 笨重 ， 
很 难 向 其 中 传送 音乐 ， 而 且 界 面 亦 如 乔布斯 所 说 “难以 置信 地 糟糕 "。 于 是 ， 为 了 让 人 们 更 便利 
地 享受 音乐 ， 摆 脱 PC 的 束缚 ， 苹 果 的 机 会 来 了 ， 随 之 应 运 而 生 的 设备 就 是 iPod。 

iPod 自发 布 以 来 已 售 出 了 3 亿 部 ，iTunes 商店 也 售 出 了 100 多 亿 首 歌曲 ( 在 2006 年 全 美 
合法 音乐 下 载 市 场 中 占据 了 88% 的 下 载 量 )。 苹 果 向 消费 者 展示 了 自己 创造 出 了 多 么 伟大 的 产 
品 ， 通 过 建立 这 种 信任 ,苹果 开始 销售 越 来 越 多 的 个 人 电脑 ， 市 场 占有 率 提高 了 两 倍 。 蕴 果 
惊人 的 数字 音乐 销售 成 绩 已 经 杀 死 了 一 大 批 音乐 商店 。2010 年 10 月 ,苹果 推出 了 闪存 存储 的 
MacBook Air， 最 终 彻底 杀 死 了 CD 唱片 。 

苹果 的 成 功 可 以 归功 于 很 多 因素 ,但 如 果 没 有 占 苹 果 主 导 地 位 的 产品 设计 ， 那 就 完全 没有 
可 能 成 功 。 虽 然 苹果 曾经 推出 过 多 种 颜色 的 iMac， 给 电脑 领域 带 来 了 独特 的 风格 ， 有 点 像 设 计 
了 一 把 非常 漂亮 的 锤子 。 但 现在 苹果 有 机 会 将 时 尚 引 入 真正 需要 的 地 方 : 人 们 随身 携带 的 音乐 
播放 器 。 

音乐 本 就 是 一 种 感性 的 东西 ， 非 常 私人 。 加 之 便携 式 音乐 播放 器 是 人 们 在 公共 场合 随身 携 
带 着 的 东西 , 它 几乎 就 是 一 个 时 尚 配饰 。 因 此 , 出 众 的 设计 是 赢 取 便 携 式 音 乐 播放 器 市 场 的 关键 。 
人 们 常 把 自己 的 身份 和 自己 对 音乐 的 偏好 联系 起 来 ， 同 样 ， 人 们 对 音乐 播放 器 的 选择 也 影响 着 
他 们 的 自我 感觉 。 今天， 人 人 都 能 认 出 苹果 标志 性 的 白色 耳机 。 

苹果 赢得 便携 式 音乐 市 场 ， 取 得 今天 辉煌 的 成 绩 ， 并 不 是 靠 存储 容量 和 功能 上 的 提升 击败 
竞争 对 手 ，iPod 在 这 些 方面 并 未 做 出 开创 性 的 创新 。 它 之 所 以 与 众 不 同 的 主要 因素 就 是 设计 。 
苹果 在 这 么 个 漂亮 小 东西 的 帮助 下 ， 让 自己 的 市 场 份额 增长 了 两 倍 。 
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2.4 Twitter 用 户 体验 逆向 工程 


如 图 2-2 所 示 ，Twitter 为 各 种 各 样 的 用 户 需求 提供 了 出 色 的 用 户 体验 。 在 本 小 节 中 ， 我 会 
对 Twitter 的 用 户 体验 做 一 个 非常 简单 的 “逆向 工程 ”研究 。 可 以 肯定 的 是 ，Twitter 在 重 构 其 服 
务 时 ， 所 做 的 远 比 这 要 深远 得 多 。 通 过 这 次 简单 的 逆向 工程 ， 我 希望 各 位 能 大 体 了 解 用 户 体验 
设计 流程 中 用 到 的 结构 化 思维 。 





注意 ”我 总 是 强调 ， 用 户 体验 设计 没有 绝对 正确 的 方法 ， 尤 其 是 在 小 项 目 中 做 独立 设计 时 。 重 
要 的 是 ， 你 需要 学 会 如 何 去 思 考 用 户 体验 ， 找 到 一 种 适合 自己 的 设计 方式 ， 把 想法 化 为 
现实 





图 2-2 
Twiter 最 新 设计 的 
用 户 体验 ， 很 好 地 下 
合 了 不 同 用 户 的 需求 
(图 片 复制 已 获 Twitter 
许可 ) 





2.4.1 用 户 角色 


Twitter 拥有 广泛 的 用 户 群 一 一 不 同 的 年 龄 段 、 生 活 方式 以 及 文化 背景 。 但 在 这 里 ， 我 们 只 
考虑 典型 的 Twitter 用 户 : 有 技术 头脑 ， 并 且 紧 密 关注 网 络 社会 “蜂巢 思维 ” "的 最 新 话题 与 发 
展 态势 的 人 








中 " 蜂 ”(hive mind ) 是 《 连 线 》 杂 志 的 创始 人 之 一 凯 文 “凯利 在 《失控 : 新 生物 文明 的 兴起 》 第 2 章 中 提出 
的 一 个 概念 。 他 认为 在 互联 网 的 进 中 ,个 体 的 价值 和 效应 并 不 大 ,但 是 像 蜂巢 一 样 由 个 体 构成 的 集体 力量 
是 非常 强大 的 。 也 就 是 说 ,个 人 的 意愿 主要 是 通过 集体 的 需求 体现 的 。 一 一 编者 注 
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用 户 角色 是 对 潜在 用 户 的 抽象 可 用 于 指导 开发 和 设计 工作 的 决策 。 用 户 角 色 的 复杂 度 取 
决 于 项 目的 预算 和 复杂 度 。 在 较 大 的 项 目 中 ， 需 要 花 很 多 心思 来 尽 可 能 地 让 用 户 角 色 接近 不 同 
目标 市 场 和 受众 的 特点 。 如 果 是 针对 团队 用 户 ,那么 应 该 为 每 个 用 户 角 色 起 一 个 名 字 , 比 如 “贝蒂 ” 
或 者 “ 鲍 勃 "。 有 时 甚至 要 把 用 户 角 色 的 具体 形象 表现 出 来 ， 这样， 在 与 团队 成 员 讨论 时 ， 你 就 
能 对 某 类 用 户 有 个 更 具象 的 认识 。 然后 , 便 可 以 确定 每 个 用 户 角色 对 产品 的 需求 。 通过 以 上 方式 ， 
你 就 能 打造 出 真正 适合 受众 的 解决 方案 - 

许多 用 户 体验 设计 资源 推荐 使 用 一 些 非常 复杂 的 用 户 角 色 ， 而 我 这 里 只 举 一 个 非常 简单 的 
例子 。 你 可 以 在 很 短 的 时 间 内 构造 出 合适 的 用 户 角色 。 

口 名 字 : 迈克 

口 职业 : Ruby on Rails ( RoR ) Web 开发 工程 师 /创业 者 

口 自述 ;“ 我 希望 通过 Twitter 与 高 手 进行 有 效 的 沟通 ， 推 广 我 众多 的 网 络 产品 并 且 收 集 反 

馈 信息 。 有 时 ， 在 排除 故障 时 ， 我 喜欢 在 Twitter 上 询问 ， 看 看 别人 有 什么 建议 。” 

口 需求 :能 够 记录 对 话 ， 而 且 要 能 轻松 浏览 众多 推广 

这 样 ， 我 们 就 知道 迈克 是 位 Web 开发 高 手 ， 在 实验 不 同 的 创业 项 目 。 他 不 想 错过 技术 和 创 
业 领 域 的 最 新 动态 ( 以 及 其 他 领域 的 新 闻 )。 他 希望 能 和 其 他 高 手 交流 ， 时 不 时 地 帮助 别人 或 接 
受 别人 的 帮助 。 有 可 能 你 就 认识 和 迈克 相像 的 Twitter 用 户 。 对 了 , 你 自己 可 能 就 有 迈克 的 影子 。 

可 以 看 到 ， 即 使 只 有 短 短 几 句 话 ， 我 们 也 能 获取 很 多 关于 典型 用 户 的 信息 ， 以 及 他 在 产品 
使 用 方式 上 的 很 多 要 求 及 意见 。 迈 克 深 详 技 术 ， 所 以 他 大 概 可 以 理解 稍微 复杂 的 界面 。 此 外 ， 
他 希望 Twitter 易于 交流 ， 易 于 用 来 推广 产品 。 


2.4.2 ”用例 


用 例 有 时 又 被 称 为 用 户 故 事 ， 有 助 于 更 有 效 地 解决 典型 用 户 的 一 些 重要 问题 和 使 用 方式 。 
用 例 可 能 与 在 构建 用 户 角 色 中 所 列 出 的 用 户 需 求 非常 相似 ， 甚 至 完全 相同 。 从 本 质 上 说 ， 用 例 
是 设计 者 预期 用 户 会 经 常 遇 到 的 虚构 场景 。 通 过 真实 地 模拟 这 种 场景 ， 并 从 用 户 角色 的 角度 看 
问题 ， 就 能 非常 有 针对 性 地 思考 对 特定 情况 很 有 效 的 解决 方案 。 

Twitter 其 实 稍 显 杂 乱 : 140 字符 以 内 的 内 容 不 断 涌 出 ， 并 没有 什么 结构 来 组 织 它们 。 当 然 ， 
你 可 以 选择 关注 的 人 ， 也 可 对 其 进行 分 组 .但 最 终 ， 信 息 流 依然 十 分 庞大 。 推 文中 可 以 包含 许 
多 其 他 的 信息 : 一 条 推 文 可 以 提 及 其 他 Twitter 用户， 可 以 被 其 他 用 户 转发 ， 也 可 以 只 是 众多 对 
话 中 的 一 条 。 此 外 ， 推 文 的 基本 内 容 也 可 能 是 一 个 链接 ， 链 向 多 媒体 ， 例 如 图 片 或 者 视频 ， 抑 
或 显示 用 户 发 推 文 时 的 地 理 位 置信 息 - 

化 解 这 些 混乱 的 诀 穿 是 , 让 用 户 可 以 浏览 所 有 推 文 , 同时 在 不 干扰 当前 信息 流 阅 读 的 情况 下 , 
又 能 快速 地 获取 每 条 推 文 所 有 相关 的 富 数据 。 而 矛盾 之 处 在 于 ， 把 富 数据 置 人 推 文 流 中 又 会 破 
坏 用 户 浏览 推 文 的 便利 性 。 所 以 ， 设 计 方案 必须 既 允 许 用 户 访问 这 些 富 数据 ， 又 允许 用 户 浏览 

为 了 真正 理解 上 述 问题 的 最 佳 解决 方案 ， 我 们 可 以 制作 几 个 用 例 ， 大 体 描 绘 用 户 如 何 消费 
推 文 信息 ， 以 及 在 一 个 具体 的 用 例 中 ， 哪 些 因素 在 发 挥 作用 。 下 面 就 是 这 样 的 一 个 用 例 。 


第 2 章 设计 的 目的 


此 用 例假 设 了 这 样 的 情况 : 你 看 到 一 条 以 @Reply 开头 的 推 文 ， 想 知道 这 条 推 文 的 作者 是 
在 回复 什么 消息 。 有 时 ， 你 可 能 会 在 自己 的 推 文 流 中 看 到 诸如 此 类 的 推 文 :“@ 某 某 我 一 直 有 
那样 的 问题 。 我 更 喜欢 用 Firebug。” 除非 你 能 看 到 他 在 回复 什么 话题 ， 否 则 就 完全 不 知 
道 他 是 在 谈论 什么 。 所 以 ， 你 可 能 会 概括 出 如 下 用 例 
局 用 例 : 引起 回复 的 话题 是 什么 ? 
口 描述 : 迈克 看 到 一 篇 推 文 写 道 :“@@ 某 某 但 是 创业 公司 喜欢 推演 指数 增长 曲线 。” 迈 克 想 
知道 这 条 推 文 回复 的 是 什么 话题 。 它 可 能 是 一 段 讨论 中 的 一 部 分 ， 如 果 通 过 某 种 机 制 允 
许 用 户 浏览 这 次 讨论 中 的 所 有 推 文 ， 那 就 太 好 了 。 另 外 .迈克 可 能 并 不 认识 推 文 中 提 到 
的 那 位 用 户 ， 所 以 能 够 提供 一 些 关 于 该 用 户 的 信息 就 更 好 了 










口 用 户 自述 :“ 嗯 , 这 个 讨论 好 像 很 有 趣 。 我 想 知道 他 们 在 讨论 什么 。 另 外 , 谁 是 @ 某 某 ? ” 
口 需求 : 当前 推 文 所 回复 的 推 文 ， 显 示 对 本 推 文 做 出 回复 的 推 文 ， 显 示 推 文中 提 及 的 


用 户 1 

仅仅 从 这 么 一 个 简单 的 用 例 ( 显然 这 样 的 用 例 还 有 很 多 )， 你 就 会 慢 慢 理解 Twitter 为 何 会 

如 此 安排 界面 布局 了 击 某 条 推 文 ， 旁 边 便 会 弹出 “ 推 文 信息 面板 "， 显 示 此 推 文 的 相关 

信息 。 对 应 前 面 的 用 例 ， 你 可 以 在 面板 中 看 到 参与 讨论 的 所 有 推 文 ， 从 而 满足 用 户 需 求 。 

另外 ,信息 面 板 中 还 会 显示 简单 的 用 户 资料 。 这样， 在 推 文 信息 面板 静止 不 动 的 情况 下 ， 我 们 
的 用 户 角 色 迈 克 仍 然 可 以 在 左 侧 浏览 自己 的 推 文 流 ( 见 图 2-3 ) 











图 2-3 
选中 革 条 推 文 后 ， 推 
文 信息 面板 便 会 潮 
出 ,不仅 能 够 提供 
选中 推 文 的 相关 信 
| 息 ,而 且 还 能 让 用 户 
， 继续 浏览 自己 的 推广 
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国 汪 一 二 一 一 ~ 一 一 一 > 
仅仅 考虑 这 些 最 常见 的 用 例 ， 就 能 想 出 也 适用 于 许多 非常 见 用 例 的 设计 方案 。 推 文 信息 框 


可 以 显示 推 文 关联 的 多 媒体 信息 ， 如 图 片 或 视频 。 这 种 设计 既 避 免 了 链接 跳 转 ， 把 用 户 留 在 
Twitter 域名 之 下 ， 又 可 以 让 用 户 看 到 推 文 的 具体 内 容 
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2.4.3” 线 框图 


基于 目前 的 已 有 信息 , 加 之 更 多 的 细节 考量 , 你 就 可 以 开始 草拟 Twitter 应 用 的 前 端 “ 骨 架 ” 
了 。 通 常 ， 这 个 过 程 叫 做 画 线 框图 因为 只 是 画 出 简单 布局 ， 无 需 任何 设计 元 素 。 线 框图 可 以 
让 你 和 团队 直观 地 了 解 应 用 程序 中 各 部 分 的 位 置 

项 目 不 同 ， 线 框图 复杂 性 也 会 有 极 大 差异 





- 些 人 喜欢 用 类 似 Balsamiq Mockups 这 样 的 原 
型 设计 软件 来 制作 功能 原型 ;一些 人 喜欢 在 类 似 Adobe Illustrator 或 者 OmniGraffle 这 样 的 矢量 
绘画 软件 中 画 线 框图 ; 而 开发 人 员 喜 欢 直接 编码 用 HTML 和 简单 的 CSS 构建 线 框图 ， 这 
种 方式 还 有 个 好 处 ， 就 是 成 果 可 以 直接 用 于 项 目 后 续 阶 段 。 还 有 些 人 喜欢 画 非常 粗糙 简单 的 草 
图 ( 见 图 2-4 )， 或 者 结合 使 用 以 上 所 有 的 方式 









图 24 

为 后 续 开 发 理 清 思 
路 ， 有 这 么 一 张 简单 
的 草图 就 足够 了 





重要 的 是 ， 画 线 框图 时 ， 你 可 以 把 自己 的 想法 表达 出 来 ， 而 不 会 被 目前 来 说 并 不 重要 的 微 
小 细节 所 干扰 ， 如 字体 和 颜色 





2.5 小 结 


视觉 设计 和 组 成 用 户 体验 设计 的 其 他 原则 和 组 成 门类 相互 成 功 的 设计 必须 依靠 所 有 
这 些 原则 和 门类 因此 在 做 项 目 时 ， 对 用 户 体验 设计 有 所 了 解 很 重要 - 用 户 体验 设计 的 
结构 化 思维 , 可 以 - 品 雏形 , 而 产品 雏形 会 强烈 地 影响 你 的 视觉 设计 


















了 成 功 不 一 / 良好 的 视觉 设计 。 保 持 敏 锐 一 一 了 解 用 户 需求 ， 用 户 如 何 使 用 产品 ， 以 
及 你 的 产品 如 何 融 人 竞争 格局 

优秀 的 视觉 设计 取决 于 优秀 的 用 户 体验 设计 。 在 项 目的 早期 运用 一 些 用 户 体验 设计 流 
程 。 用户 角 色 、 用 例 以 及 线 框图 都 有 助 于 你 在 深入 细节 之 前 ， 专 注 地 研究 用 户 体验 的 关 
键 方面 
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排版 的 媒介 和 样式 


对 于 设计 高 手 来 说 ， 选 择 好 正确 的 工具 是 很 重要 的 。 我 们 都 深 知 ， 不 能 使 用 字体 标签 做 版 
式 控制 ， 不 能 使 用 表格 处 理 格式 布局 ， 应 该 使 用 CSS， 但 若 出 于 经 济 方面 的 考虑 ， 情 况 就 另 作 
别论 了 ,比如 第 2 章 中 提 到 的 情况 。 虽然 CSS 这 种 分 离 内 容 与 格式 的 技术 经 历 了 一 段 时 间 的 发 展 ， 
但 现在 的 Web 标准 终于 让 它 变 得 可 行 起 来 。 掌 握 了 这 些 技术 及 其 主要 适用 范围 ， 就 能 做 出 明智 
的 决定 。 可 能 你 根本 没 意 识 到 已 经 做 出 了 这 样 的 决策 一 一 因为 这 已 经 成 为 了 你 无 意识 的 习惯 。 

就 像 高 手 知道 要 将 HTML 从 CSS 中 刊 离 出 来 一 样 ， 技 能 部 练 的 设计 师 也 可 以 在 任何 情况 下 
立刻 挑选 出 合适 的 字体 。 长 时 间 的 排版 工作 要 对 文档 层次 进行 细微 调整 ， 长 期 的 字体 研究 与 差 
异 辨析 ， 这 些 工 作 使 得 训练 有 素 的 设计 师 可 以 迅速 记 起 任意 一 种 字体 ， 就 像 母 亲 记 起 孩子 的 面 
孔 一 样 。 

挑选 恰当 的 字体 首先 需要 理解 受众 的 情感 反应 ， 而 对 这 种 情感 反应 的 理解 ， 又 源 自 对 工具 、 
人 及 字体 背后 理念 的 理解 。 如 果 处 理 不 好 这 些 因素 ， 挑 选 字体 简直 就 像 是 猜 这 语 。 

本 章 将 会 曾 述 工具 如 何 对 排版 这 一 设计 要 素 产 生 关键 性 的 作用 ， 同 时 还 会 向 你 展示 : 使 用 
不 当 的 普通 字体 是 如 何 把 效果 搞 砸 的 。 我 会 论证 排版 与 语言 之 间 的 密切 关系 ， 并 概述 一 下 思想 
和 事物 的 视觉 呈现 是 如 何 演变 成 现代 字母 的 。 你 还 会 了 解 到 ， 在 利用 各 种 工具 与 技术 的 字体 创 
制 背景 下 ， 新 旧 字 体 在 演变 过 程 中 的 内 在 紧密 联系 。 最 后 还 将 说 明 为 何 一 些 历史 悠久 的 字体 反 
而 与 许多 现代 技术 不 兼容 。 


3.1 误 用 的 翡 剧 : Comic Sans 字体 缘何 车 人 厌 


当 使 用 者 并 未 完整 了 解 某 一 字体 的 真实 内 涵 ， 就 会 产生 极为 糟糕 的 用 例 ， 这 方面 我 能 想到 
的 最 夸张、 最 难忘 的 例子 大 概 就 是 Comic Sans 字体 的 境遇 了 。 

几乎 每 个 人 都 对 Comic Sans 字体 爱 恨 交加 ， 这 种 类 似 儿 童 笔迹 的 字体 名 声 不 佳 ， 以 至 于 有 
人 竟 要 发 起 一 场 禁用 它 的 运动 。 若 对 普通 的 设计 外 行 (除了 幼儿 园 老师 ) 展示 这 种 字体 ， 他 可 
能 只 会 觉得 有 些 幼稚 ， 而 对 于 训练 有 素 的 设计 师 来 说 ， 这 种 字体 简直 就 是 罪行 累累 ,不 可 侥 想 。 





那么 ， 又 是 什么 让 Comic Sans 字体 变 得 如 此 不 堪 呢 
和 这 种 糟糕 境况 ， 我 拿 它 和 Helvetica 字体 做 个 对 比 。 后 者 深 受 人 


并 且 还 有 于 它 的 电影 .《 赫 维 体 》( Helvetica，2007 去 看 看 吧 ! 
首先 ， 有 一 点 明确 一 下 : 比较 这 两 种 字 和 橘子 。 它 们 所 传 
绪 完 全 不 同 ，Helvetica 看 起 来 严 j ， 而 Comic Sans 则 通常 用 于 轻 
的 情境 ， 比 如 幼儿 园 教室 
但 是 两 者 之 间 也 有 相 人 






为 了 阐明 Comic Sans 字 












出 的 情 






点 像 比 









也 就 是 说 字体 的 整体 笔画 粗细 


之 处 。 它们 的 笔画 都 未 经 
悦 整 的 






与 Garamond 字体 的 ，Garamond 字体 的 笔画 是 经 


笔画 未 经 调整 





致 。 图 3-1 显示 出 Helvetica 守 


Comic Sans 字体 和 Helvetica 字体 一 样 





图 3-1 


> Helvetica 字体 和 Comic 
Sans 字体 都 不 调整 笔 
画 ， 而 Garamond 学 

体 调整 笔 


Comic Sans 








Helvetica 


Garamond 
笔画 未 经 调整 








之 所 生 这 种 笔画 调整 的 效果 ， 是 基 
印刷 术 之 前 ,抄写 员 用 平头 笔 耐心 、 优 美 地 抄写 
这 样 的 书写 工具 和 方式 影响 了 字母 的 形状 ， 
仿 手写 字体 创造 了 印刷 字体 .虽然 后 来 印刷 字体 发 展 出 了 自己 的 样式 ,但 在 19 世纪 初 无 衬 线 字 





是 经 过 调整 的 ， 





2 所 示 ， 





易 辨 认 度 也 做 了 一 些 调整 。 如 图 3 









虽然 Helvetica 没有 调整 笔画 ， 但 为 了 提高 
Helvetica 字体 中 的 字母 n 的 干线 和 字 肩 交汇 处 变 细 了 。 这 种 调整 有 助 于 平衡 字符 的 视觉 
线 诊 宁 重 区 域 
体 在 字母 的 笔画 交 江 
处 做 了 调整 


Helvetica Comic Sans 
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如 果 显 起 眼睛 再 看 图 3-2， 就 会 注意 到 ，Comic Sans 字体 的 笔画 交汇 处 会 出 现 不 成 比例 的 视 
觉 沉重 区 域 ， 而 Helvetica 字体 的 重量 则 分 布 得 比较 匀称 。 

具有 讽刺 意味 的 是 ， 这 种 差别 是 因为 Comic Sans 字体 受到 了 圆 头 记号 笔 或 马克 笔 这 类 绘图 
工具 的 影响 。 这 种 工具 写 出 的 笔画 是 没有 粗细 变化 的 。 而 Helvetica 字体 是 在 老 版 字体 基础 上 优 
化 而 来 的 ， 因 此 没有 受到 绘图 工具 的 明显 影响 

Comic Sans 字体 之 所 以 令 人 觉得 不 每 服 ， 主 要 原因 就 是 这 种 视觉 重量 上 的 不 合理 。 重 量 或 
者 结构 上 的 均衡 ,对 字体 的 易 辨 认 性 和 易 读 性 非常 重要 。 视 觉 重量 均衡 的 字母 或 段落 ,清晰 易 读 ， 
跃然 纸 上 

图 3-3 中 给 出 了 分 别 采用 Helvetica 与 Comic Sans 两 种 字体 的 段落 ， 显 示 出 了 两 者 在 质感 上 
的 不 同 。 为 了 突出 对 比 的 效果 ， 我 将 这 两 个 段落 都 进行 了 模糊 处 理 ， 使 人 可 以 客观 地 体验 到 显 
眼看 字 、 辨 识 极端 明暗 区 域 时 的 情形 








图 3-3 

Helvetica 字体 文本 段 we em om 吧 Eee Ca 

落 的 质感 比较 均衡 ， Wy wt we me 4 

而 Comic Sans 字 体 文 we 0 Sm ~ag er 0 Be 

本 段落 则 不 然 ,有 明 EEE Qa un em qos eet 

显 的 亮 班 和 瞳 班 wo mm 4 pe sara ae psp 
Helvetica Comic Sans 


首先 ， 注 意 字体 线条 明暗 的 总 体 变化 。Helvetica 字体 表现 为 更 加 均匀 的 灰色 ， 而 Comic 
Sans 字体 的 明暗 差别 很 大 ， 整 个 段落 中 有 很 多 散乱 的 黑 点 。 在 采用 Comic Sans 字体 的 字母 中 ， 
明暗 差异 最 明显 的 是 字母 e 和 +，e 在 图 例 中 看 起 来 就 像 是 数 滴 血 迹 ，t 则 形 同 枯 砍 的 死 树 ， 而 且 
e 看 起 来 比 其 他 字母 要 深 一 些 , 因 为 它 整体 的 视觉 重量 感 很 不 合理 ,图 3-4 对 比 了 Comic Sans 字 体 、 
Garamond 字体 和 Helvetica 字体 ， 便 于 各 位 理解 Comic Sans 字体 为 何 是 不 规则 的 典型 代表 


字眼 小 ， 而 字 口 大 
字 口 


Garamond Helvetica Comic Sans 

Garamond 字体 中 的 小 写字 母 e 字 口 大 ,字眼 ?小 ,但 是 笔画 的 调整 使 其 重量 均衡 。 字 母 e 
左下 部 最 粗 的 笔画 与 较 大 的 字 口 相抵 消 ， 细 小 的 字眼 与 封闭 字眼 的 细 横 线 构成 了 视觉 平衡 。 请 
注意 ,图 3-4 中 的 示例 磅 值 都 相同 ， 但 却 因为 不 同 字体 系统 下 小 写字 母 x 的 高 度 ? 不 同 ， 这 三 个 














四 字眼 (eye )， 又 称 字 谷 ( counter )， 或 者 说 负 空 | 
回 在 西 文字 体 排版 中 ， 小 写字 母 x 的 高 度 被 视 作 字 母 的 基本 高 度 。 一 一 编者 注 
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示例 的 大 小 看 起 来 也 不 一 样 

Helvetica 字体 则 字眼 大 和 字 口 小 ， 来 弥补 无 笔画 粗细 调整 的 不 足 ， 从 而 维持 视觉 平衡 。 然 
而 , 由 于 Comic Sans 字体 样式 是 基于 手写 字体 的 , 其 字母 e 的 字眼 就 是 倾斜 的 . 从 而 有 了 字眼 小 、 
字 口 大 的 效果 。 但 因为 Comic Sans 字体 没有 笔画 调整 ， 无 法 弥补 缺失 的 视觉 平衡 ， 所 以 彻底 失 
败 了 。 

但 Comic Sans 字体 本 身 视 觉 重量 感 的 不 均衡 ， 并 不 是 造成 文本 段落 不 均匀 的 唯一 原因 。 
Comic Sans 字体 的 字 辽 调和 度 非常 差 。 字 隙 调和 是 指 为 使 字母 均衡 排列 而 对 字母 间距 所 做 的 调 
整 。Helvetica 字体 的 字 隙 使 它 本 就 有 一 个 相当 好 的 字 距 调整 表 。 字 距 调整 ， 顾 名 思 义 ， 就 是 指 
对 两 个 字母 之 间 的 距离 进行 调整 ， 一 种 优秀 的 字体 对 其 中 所 有 的 字母 组 合 都 有 一 套 参数 ( 字 距 
调整 表 )， 以 便 让 字母 最 终 呈 现 良好 的 视觉 效果 ， 但 如 果 在 设计 字体 的 每 个 字母 时 就 没有 考虑 到 
字母 之 间 如 何 关联 ， 那 就 不 可 能 生成 良好 的 字 距 调整 表 。 

在 图 3-5 中 ，Comic Sans 字体 的 字母 f 和 o 之 间 的 间隙 很 难看 ， 但 是 也 不 能 简单 地 将 两 个 
字 排 紧 ， 因 为 这 会 造成 视觉 上 的 压力 : 若 字 母 之 间 离 得 太 近 ， 字母 f 的 横 划 与 字母 o 之 间 就 会 
产生 局 促 感 。Comic Sans 字体 中 还 有 其 他 类 似 的 问题 ， 但 这 个 例子 最 具有 代表 性 


图 3.5 
et fox pet fox wi 
| 的 字 阶 调和 度 使 得 其 
精 栏 的 字 院 调和 府 / 字 中 。 字 距 很 难 调整 得 当 
Helvetica Comic Sans 





如 果 字母 f 的 横 划 右 侧 不 是 那么 长 ， 就 完全 可 以 避免 这 个 问题 ，Helvetica 字体 的 字母 f 的 
横 划 两 侧 就 稍 短 一 些 。 有 一 种 方法 可 以 改善 这 种 糟糕 的 字母 组 合 ， 也 就 是 将 所 有 字母 整体 拉 开 
一 点 距离 ， 给 上 述 这 种 紧凑 的 字母 组 合 留 一 些 余地 。 但 是 这 种 方法 在 大 多 数 计算 机 应 用 程序 中 
行 不 通 ， 并 且 也 弥补 不 了 Comic Sans 字体 的 其 他 诸多 缺陷 。 

在 高 分 辩 率 情况 下 ，Comic Sans 字体 的 排版 基础 非常 差 。 当 然 Comic Sans 字体 本 也 不 是 为 
此 而 设计 的 ， 而 这 正 是 它 被 认为 是 糟糕 字体 的 原因 之 一 。 

Comic Sans 最 初 被 设计 用 于 Microsoft Bob 软件 的 对 话 泡 泡 当中 。 可 惜 设计 工作 没有 按时 完 
成 ， 因 此 并 没有 真正 用 于 该 软件 当中 ， 但 是 它 最 终 随 着 Windows 95 一 起 发 布 ， 而 Comic Sans 
字体 就 是 从 那 时 开始 逐渐 收获 恶 评 的 。 

当时 ，Comic Sans 字体 到 了 Windows 95 用 户 的 手中 后 ， 谁 也 不 知道 人 们 会 去 怎么 用 它 - 它 
被 印 在 烘 培 食品 售卖 传单 上 、 生 日 聚会 邀请 函 上 .甚至 名 片上 。 需 要 注意 的 是 ， 这 种 字体 的 设 
计 初 囊 是 用 于 屏幕 显示 ， 而 在 其 诞生 的 那 年 ， 也 就 是 1994 年 ， 大 多 数 个 人 电脑 系统 ( 也 包括 
Windows 95 ) 并 不 具备 反 锯齿 处 理 技术 (这 种 技术 能 使 屏幕 上 的 字体 看 起 来 更 平滑 )。 由 于 没有 
这 项 技术 ， 字 体 看 起 来 会 呈 锯 齿 状 ， 就 像 用 乐高 积木 堆 成 的 那样 。 但 这 也 并 非 世界 末日 ,字体 
只 需 也 依 此 设计 就 行 。 注 意图 3-6， 在 带 有 锯齿 的 情形 下 ，Comic Sans 字体 的 字母 6 的 视觉 重量 
感 就 均匀 多 了 。 
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图 3-6 

Comic Sans 字体 的 

wis pet fox pet fox 
有 锯齿 效果 的 屏幕 中 _ 

显示 Comic Sans Garamand 


事实 上 ， 如 图 3-7 所 示 ， 与 并 不 是 为 屏幕 显示 而 设计 的 Garamond 字体 相 比 ，Comic Sans 字 


体 在 可 读 性 方面 表现 得 相当 不 错 - 


图 3-7 

字体 大 小 为 12 像素 的 
锯齿 效果 下 ，Comic 
Sans 字体 比 Garamond 
字体 更 易 读 


Mr Bennet was s0 odd a mixture of ouick 
Parts, sancasfic humoun reseme, and 
capnice. hat the experience of three and 
‘twenty years had been nsufficent 和 
make his wrfe unde rarard his characrer 
Her mnd was less difficul fo develope. 
She was a woma of mem unde rstanding 


Me Bennot ase0 odd mlmauieofqakk Pr 
recast hammoar acrve and capdlca tat the 
pains of hea snd roen'y ya had been 
aufcleoev make he wi udeerand hie 
chances, Her mind ee les dlffcslr © develope 
She ees woran of man andaemandlng Jinle 
ieemasoa aad ancarml tomper When she we 


Comic Sans Garamond 

所 以 ，Comic Sans 字体 本 身 并 不 糟糕 ， 只 不 过 是 被 大 范围 误 用 的 普通 字体 。Windows 95 是 
第 一 个 获得 巨大 成 功 的 操作 系统 。 当 计算 机 刚 开始 在 美国 家 庭 中 流行 时 ， 大 部 分 电脑 安装 的 都 
是 Windows 95 系统 ,并 附带 有 Comic Sans 字体 。 于 是 ,无 论 男 女 老 少 , 还 是 烘 培 食 品 销售 负责 人 ， 
都 拥有 了 前 所 未 有 的 出 版 发 行 能 力 ， 但 却 几乎 没有 人 真正 拥有 设计 意识 


桌面 出 版 浪潮 中 的 Comic Sans 字体 


过 去 ， 如 果 休 的 猫 对 了 ， 要 写 寻 猫 启事 ， 那 么 最 有 效 的 办 法 就 是 用 马克 笔 摹 拟 一 份 ， 热 后 
贴 上 猫 味 的 照片 ， 再 到 附近 超市 复印 几 份 .每 份 15 美 分 。 接 着 在 小 区 附近 四 处 张贴 或 者 像 个 
穴居 人 一 样 给 报社 打 个 电话 ， 在 报纸 上 刊登 寻找 猫 味 的 广告 

但 自从 有 了 Windows 95、 个 人 电脑 ， 以 及 打印 机 ， 你 就 可 以 在 家 使 用 Microsoft Word 软件 
自己 动手 制作 招贴 告示 ， 船 后 打印 出 来 。 并 且 更 赞 的 是 ， 你 可 以 随心 所 窒 地 使 用 任何 字体 ! 字 
体 是 什么 ? 你 不 知道 字体 是 什么 ? 当然 不 知道 了 , 固 为 你 以 前 从 来 就 没有 选择 字体 的 权利 ,那么 ， 
考虑 一 下 如 果 你 对 了 猫咪 会 用 哪 种 字体 来 制作 好 猫 启事 ? 

这 是 纪念 性 的 历史 时 记 ， 可 与 印刷 术 的 发 明 相提并论 。 普 通 大 众 突然 之 间 也 可 以 排版 和 打 
印 文 档 了 。 这 在 趟 时 间 内 没有 产生 什么 大 问题 。 很 多 人 乐此不疲 地 自己 动手 制作 圣诞 贸 卡 、 生 
日 聚会 着 请 函 等 ， 但 是 他 们 的 家 人 以 及 同事 等 小 群 受众 就 不 得 不 思 受 这 些 布局 散乱 的 难看 贺卡 - 

但 是 ， 在 接 下 来 的 十 年 里 ， 互 联网 越 来 越 普及 ， 出 版 力 越 来 赵强 Comic Sans 字体 不 再 只 
是 印 在 休息 室 里 的 宣传 单 上 ， 而 是 开始 出 现在 各 种 网 站 上 ， 甚 至 成 为 很 多 人 写 邮件 的 默认 字体 。 
现在 ， 任 何人 都 可 以 使 用 Comic Sans 字体 写 一 条 拥有 广泛 读者 的 消息 。 有 个 例子 ， 克 里 夫 兰 骑 
士 队 的 老板 Dan Gilbert 兽 就 小 皇帝 乌 姆 斯 的 突然 决定 离开 写 过 一 封 信 …'… 用 的 就 是 Comic Sans 
字体 ， 结 果 掀 起 了 一 场 有 关 字 体 选 择 不 当 的 轩然大波 。 
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3.2 ”排版 的 束缚 : 不 变 的 文字 


纵 观 整个 文字 排版 的 历史 可 以 发 现 ， 字 母 的 外 形 源 于 书写 它们 所 使 用 的 媒介 和 工具 。 自 从 
5000 多 年 前 ， 苏 美 尔 人 在 一 块 泥 板 上 凌乱 地 刻下 一 组 网 格 状 象形 文字 起 ， 书 面 文字 就 与 语言 
工具 及 媒介 产生 了 天 然 的 联系 ， 好 似 一 曲 精心 编排 的 舞蹈 旋律 ， 与 表演 者 的 形体 结构 、 灵 活性 
力 至 精 魂 都 不 可 避免 地 桂 合 在 一 起 。 

优秀 的 设计 都 遵循 着 一 项 重要 原则 : 设计 师 要 对 所 用 媒介 了 如 指 掌 。 每 一 种 材料 ， 无 论 是 
大 理 石板 、 钢 材 、 玻 璃 还 是 像素 ， 设 计 师 都 必须 发 挥 它 们 的 优点 ， 接 受 它们 的 缺点 。 只 有 善 加 
利用 这 些 媒介 的 特质 ， 才 有 可 能 创作 出 好 设计 ， 否 则 免 谈 。 

苹果 首席 设计 师 乔纳森 * 艾 维 就 深 说 此 道 。 他 在 接受 Core77 ( www.core77.com ) 采访 时 说 : 
“顶级 的 设计 绝对 不 是 孤立 于 设计 材料 而 存在 的 一 一 材料 引导 设计 样式 ……” 

米 开朗 基 罗 的 《大 卫 》 的 盛名 跟 它 的 雕刻 材质 有 着 密 不 可 分 的 关系 一 一 大 理 石 的 坚硬 为 这 
一 光辉 巨 作 打下 了 坚实 的 基础 。 另 外 ， 这 块 石头 还 有 一 定 的 缺陷 ， 它 是 此 前 一 位 技艺 不 精 的 雕 
刻 家 所 遗 弈 的。 为 了 利用 这 块 畸 形 的 石头 ， 米 开朗 基 罗 不 得 不 调整 大 卫 的 姿势 ， 但 因此 而 塑造 
出 的 前 倾 效果 反而 使 雕像 更 加 威严 - 

建筑 设计 一 直 受 到 建筑 材料 和 工艺 的 强烈 影响 。 当 建筑 师 开 始 在 建筑 中 使 用 钢筋 混凝土 结 
构 时 ， 建 筑 就 能 达到 前 所 未 有 的 高 度 。 芝 加 哥 的 蒙 纳 诺 克 大 厦 ( Monadnock Building )， 高 仅 
65.5 米 ， 却 是 世界 上 最 高 的 具有 承重 砖 墙 的 建筑 。 为 了 支撑 蒙 纳 诺 克 大 厦 的 重量 ， 大 厦 底 部 墙 
壁 竟 厚 达 1.8 米 , 而 迪拜 采用 钢筋 混凝土 结构 建造 的 哈 利 法 塔 ( Bur khalifa ), 却 足 有 800 多 米 高 。 

在 工业 设计 中 ,， 莘 果 的 产品 完美 地 呈现 了 其 材料 特质 。 一 体 成 型 的 全 铝 苹果 笔记 本 电脑 
MacBook Pro， 机 身 四 周 圆滑 ， 边 缘 锋 利 ， 传 达 出 一 种 坚固 耐用 的 视觉 信号 。 带 有 触摸 屏 的 
iPhone 4 手机 , 基本 上 就 是 前 后 两 片 玻璃 加 金属 边框 , 机 身 四 角 圆滑 , 也 传达 出 简洁 的 设计 理念 。 

排版 也 受 材料 和 技术 的 影响 。 但 是 ， 与 其 他 艺术 形式 不 同 ， 排 版 形式 还 与 语言 有 着 不 可 分 
割 的 联系 。 美 国 当红 独 立 乐队 Bright Eyes 的 Conor Oberst 在 歌 中 曾 这 样 唱 道 :“ 语 言 就 这 么 产生 
了 ， 从 来 没有 规划 。”(“Language just happened, it was never planned.”) 这 种 说 法 并 不 很 准确 ,但 
也 揭示 了 语言 的 进化 之 路 充满 了 流动 性 : 极为 缓慢 ， 并 且 每 次 革新 都 受 之 前 事物 的 影响 ， 革 新 
进程 近乎 无 形 。 

如 果 不 是 生活 在 现今 这 样 一 个 人 类 信息 共享 方式 发 生 翻天 覆 地 变化 的 时 代 ， 可 能 在 有 生 之 
年 ， 我 们 根本 看 不 到 语言 的 生动 变化 。 

现在 ， 你 可 能 会 用 短 消息 ( 少 于 140 个 字符 ) 这 样 和 朋友 打招呼 一 一 “how ru"， 或 者 是 用 
不 足 140 个 字符 的 推 文 消息 ,这 其 中 有 很 多 # 标签 
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曾几何时 , 写 一 本 书 需要 数 年 的 时 间 , 复制 抄录 一 本 也 是 如 此 。 只 有 极为 富裕 或 有 权势 的 人 ， 
才能 支付 得 起 这 种 开销 ， 而 且 很 少 有 人 知道 该 如 何 阅读 。 但 是 今天 ,文化 普及 程度 比 以 往 任何 
时 候 都 高 ， 维 基 百 科 中 的 词 条 可 以 在 瞬间 完成 更 新 。 

虽然 语言 传播 和 使 用 方式 都 发 生 了 巨大 的 变化 ,但 在 西方 ， 几 百年 以 来 还 是 一 直 在 使 用 拉 
丁字 母 的 衍生 文字 。 

就 像 iPad 的 设计 过 程 一 样 ， 对 于 排版 来 说 ， 样 式 与 媒介 材料 及 语言 都 密 不 可 分 。20 世纪 最 
坦率 、 最 有 主见 的 排版 设计 师 Jan Tschichold， 在 The Form of the Book 一 书 中 说 道 ， 


鉴于 排版 与 所 有 方面 都 有 关联 ， 所 以 没有 任何 发 生变 革 性 创新 的 可 能 。 我 们 不 可 
能 只 改变 单个 字母 的 基本 形态 ， 而 同时 又 不 破坏 已 被 大 众 所 热 悉 的 语言 印刷 视觉 效果 ， 
正 是 这 各 矛盾 使 得 变革 毫 无 意义 。 


用 更 为 凝练 的 带 有 戏剧 性 色彩 的 语言 概括 上 面 这 段 话 ， 那 就 是 “排版 设计 师 被 不 变 的 文字 
给 束缚 住 了 ， 远 非 其 他 艺术 家 自由 ……” 

所 以 ， 无 论 用 何 种 材料 ， 无 论 用 何 种 修饰 表现 手法 ， 字 母 x 都 是 由 两 条 交叉 的 线条 ( 至 少 
是 能 提供 这 样 视觉 暗示 的 两 根 线条 ) 组 成 。 我 们 现代 字母 表 中 的 所 有 字母 都 受 这 样 的 限制 ， 所 
有 的 排版 也 都 必须 服从 这 条 限制 。 

通过 对 上 面 的 概念 理解 ， 希 望 你 能 用 全 新 的 眼光 去 剖析 字体 。 所 有 字体 都 是 附 在 相同 骨架 
之 上 ， 形 态 各 异 的 皮肉 。 这 些 “ 骨 架 ” 就 是 文明 、 经 济 和 文化 的 产物 ， 数 百年 来 ， 依 然 如 故 。 


3.3 ”字母 表 的 组 成 


上 节 所 说 的 “不 变 的 文字 ”, 始 于 对 事物 和 思想 最 初 的 表达 ,是 数 千年 来 书面 语言 进化 的 产物 。 
在 位 于 法 国 拉 斯 科 的 洞穴 中 ,发 现 了 迄今 为 止 最 早 的 壁画 ( 约 公元 前 15000 年 至 公元 前 10000 年 ， 
如 图 3-8 所 示 )。 这 些 令 人 印象 深刻 的 形状 很 难 定义 成 是 文字 ， 但 它们 的 确 表 达 着 什么 一 一 在 这 
里 自然 代表 的 是 动物 ， 因此， 这 也 可 以 被 称 为 视觉 传播 的 一 种 形式 。 如 果 对 这 些 图 像 做 进一步 
的 抽象 ( 以 便 更 快 地 描绘 出 来 )， 那 就 形成 了 象形 文字 ( 用 于 表达 事物 ) 和 表意 文字 ( 用 于 表达 
思想 和 概念 ), 如 图 3-9 所 示 , 这 组 可 追溯 至 公元 前 12000 年 的 岩画 就 包含 着 象形 文字 和 表意 文字 。 

美 索 不 达 米 亚 ， 这 个 被 一 些 历史 学 家 认为 是 “文明 摇篮 ”的 地 方 ， 诞 生 了 人 类 历史 上 已 知 
最 早 的 有 组 织 的 文字 作品 。 随 着 动 植物 被 驯化 ， 人 们 不 再 有 生存 之 忧 ， 随 即 开 始 有 时 间 改 良 繁 
育 技术 ,同时 他 们 也 意识 到 必须 要 用 某 种 形式 来 将 成 果 记 录 下 来 农民 必须 把 农耕 活动 记录 下 来 ， 
而 政府 和 商业 组 织 也 需要 记录 纳税 情况 - 
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拉 斯 科 洞 穴 壁 画 是 所 
今 为 止 发 现 的 人 类 最 
早 的 壁画 





图 
这 些 包含 了 多 
和 表意 文 
是 最 早 的 
形式 
Jrbouldin 摄 (http; 
en.wikipedia.org/wiki/ 





5 面 语言 





User:Jrbouldin ) 








:笔划 分 出 有 序 的 网 格 ， 在 网 格 中 书写 象形 


这 种 记录 方式 ， 最 早 使 用 的 是 蒜 土 板 ， 并 用 
E 的 


( 见 图 3-10 )。 随 着 越 来 越 多 的 记录 保存 需要 ,职业 抄写 员 诞 生 了 ， 而 且 人 们 立 和 有 了 
体系 ， 加 入 垂直 的 纵 栏 ， 从 而 使 得 抄写 员 可 把 手 放 在 黏土 板 上 而 不 会 弄 乱 未 二 
到 了 提高 
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象形 文字 被 濠 草地 写 
在 或 印 在 黏 士 板 上 ， 
用 以 记录 农耕 活动 
Jim Kuhn 摄 (http 
wwwlickr com/people 


takomabibelot ) 





随 着 象形 文 步 抽象 ， 以 及 
在 黏土 板 上 按压 出 笔画 ， 而 不 必 再 拖 搜 
简化 了 书写 过 程 

这 种 有 组 织 的 
块 黏土 板 ， 就 可 ! 
了 枫 形 工具 的 使 用 ， 这 些 因 素 的 共同 作用 形成 了 攀 形 文字 上 





I 提升 ， 尖 头 笔 被 栅 开 
管 尖 。 几 条 独立 的 压 痕 就 可 以 





所 代 替 ， 这 样 就 可 以 直接 
成 一 个 象形 文字 ， 大 大 









这 是 媒介 





响 样式 的 典型 例子 。 观 察 其 中 的 
致 。 创 新 驱动 经 济 ， 进 而 促进 
种 表现 样式 ( 见 图 3-11 ) 








图 3-11 
千 土 板 中 槐 形 文字 的 
样式 受到 了 栅 形 笔 的 


直接 影响 
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3.4 字母 起 源 


早期 的 书写 体系 都 很 复杂 ， 难 以 学 习 ， 比 如 棉 形 文字 、 古 埃及 圣 书 字 、 克 里 特 象 形 文字 以 
及 中 国 书法 。 最 终 ， 西 方 文明 选 定 了 一 组 较 小 的 字符 集 ， 发 展 出 了 我 们 现在 的 现代 字母 表 ( 见 
图 3-12)。 

由 于 采用 了 简易 的 拉丁 字母 ， 书 写 变 得 普遍 起 来 。 拉 丁字 母 形成 于 罗马 帝国 时 代 。 在 当时 ， 
人 们 会 用 刷子 和 涂料 在 墙 上 涂抹 ， 用 笔 和 墨水 在 莎 草 纸 上 书写 ,或 者 按照 事先 描绘 的 痕迹 在 石 
头 上 溺 刻 ， 这 就 是 最 初 的 排版 。 


va 长 人 A 入 A 字 本 ( 字 引 A) 的 注 


进 示 例 
克 里 特 岛 腓 尼 基 早期 希腊 语 。 古典 希腊 语 拉丁 语 现代 英语 
象形 文字 文字 


3.4.1 罗马 帝国 的 “ 推 特 ” 


庞 贝 古城 的 遗迹 就 像 是 罗马 文明 的 时 间 胶 囊 。 在 当时 的 罗马 帝国 中 ， 庞 贝 是 座 充 满 活力 的 
城市 。 它 是 艺术 和 文化 中 心 ， 又 是 角 斗 士 竞技 的 故乡 ， 比 罗马 圆 形 大 剧院 中 的 角 斗 士 竞技 早 一 
个 世纪 。 但 由 于 公元 79 年 维 苏 威 火 山 的 喷发 ， 整 个 城市 被 掩埋 在 了 火山 灰 之 下 

从 那 刻 起 ， 庞 贝 城 就 被 封存 了 起 来 ， 直 到 1500 多 年 后 才 得 以 重 现 天 日 。 今 天 ， 发 掘 工作 仍 
在 继续 ， 该 遗迹 揭示 了 与 罗马 帝国 生活 方式 有 关 的 种 种 资料 ， 这 些 都 是 历史 学 家 们 前 所 未 见 的 
街道 、 别 坚 的 楼 层 布局 以 及 壁画 都 被 原样 保留 下 来 ， 与 近 两 千年 前 厄运 降临 的 那 一 天 完全 相同 。 

研究 人 员 把 火山 喷发 遇难 者 所 形成 的 火山 岩 壳 注 和 石膏 ， 制 成 了 模型 。 你 可 能 已 经 看 过 这 
些 模型 ， 火 山 灰 中 的 人 形 空 阶 向 世人 展示 出 ， 在 那 最 后 一 刻 ， 庞 贝 城 居民 或 靠 墙 赚 曲 ， 或 拖 住 
脸 部 ， 或 夫妻 相 拥 ， 或 与 家 人 抱 作 一 团 

不 提 这 些 惨 剧 了 ,还 是 多 说 说 庞 贝 古城 中 的 日 常生 活 吧 ， 整 个 城市 中 有 着 数 以 百 计 的 用 方 
言 写成 的 街头 涂鸦 。 这 些 写 在 墙 上 的 信息 ， 就 像 古代 版 的 推 特 。 涂 鸦 内 容 有 感谢 和 嘲弄 现任 领 
袖 的 ， 炫 炮 超 凡 性 能 力 的 ， 也 有 简单 说 “我 做 面包 ”的 

这 些 涂 鸦 大 多 是 使 用 平头 剧 , 用 粗糙 大 写字 体 和 方形 大 写字 体 写成 的 ( 参见 后 面 的 补充 阅读 ， 
“排版 历史 中 的 著名 字体 ” )。 为 了 快速 地 书写 ， 尽 可 能 地 减少 笔画 ， 而 又 能 保持 某 种 审美 标准 ， 
字母 都 被 做 了 优化 处 理 。 字 母 的 最 后 一 笔 ， 如 果 只 是 简单 地 抬 笔 结束 ， 会 显得 较为 笨拙 ， 所 以 
在 笔画 结尾 处 添加 了 衬 线 ， 让 字母 看 起 来 干净 利落 ， 而 且 更 易于 阅读 ( 如 图 3-13 所 示 )。 
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图 3-13 

庞 贝 古城 中 的 涂鸦， 
其 样式 明显 受到 了 平 
头 刷 的 影响 

Gastev 摄 ( http://www' 





flickr.com/photos 


gastev/ ) 








至 在 雕刻 于 大 理 石 之 上 的 字母 中 ， 比 如 被 认为 是 罗马 排版 洪峰 之 作 的 图 拉 真 凯旋 柱 上 ， 
平头 刷 的 痕迹 中 有 着 诸 之 处 ， 就 像 苹 果 公司 已 故 CEO 史 蒂 夫 “' 乔 布 
斯 所 说 的 那样 ， 书 法 有 着 “科学 永远 不 能 捕捉 到 的 美 "， 但 概括 起 来 ， 字 母 的 “骨架 ”都 是 基于 
正方 形 、 三 角形 和 圆 形 的 ( 见 图 3-14 ) 














图 3-1 -一 
罗马 大 写字 母 的 理论 | 
基础 : 正方 形 角 

形 和 圆 形 











2 在 雕刻 大 理 石 
灵活 ， 而 且 可 以 外 个 固定 的 角度 ， 所 以 
之 后 ， 才 会 被 精巧 地 瘟 刻 在 大 理 石 上 ( 见 





图 3-15) 





A History of Graphic 


Design, 3rd Edition, 
Meggs 著 ，1998 年 
由 John Wiley & Sons 
公司 出 版 。 转 载 获 
John Wiley & Sons 公 
司 许可 





线 ， 很 可 能 是 受到 了 平头 刷 向 ， 但 在 一 些 罗马 的 碑刻 铭文 中 ， 
16 显示 了 庞 贝 古城 露天 剧场 内 的 一 块 碑文 ， 它 的 雕刻 时 期 要 早 
虽然 我 们 认为 这 样 的 碑文 ( 有 着 笨拙 的 字母 宽度 和 间距 ) 实际 上 是 
炸 刻 上 的 ， 但 碑文 中 那 尖 角 一 样 的 衬 线 无 疑 来 自 于 辫子 的 扫尾 工序 ， 而 非 用 平头 刷 
经 巧妙 刻画 所 致 













宽 


图 3-16 
庞 贝 古城 露天 剧场 内 
铭文 上 的 文字 样式 深 
受 茧 子 而 不 是 平头 刷 








David Kadavy 摄 
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排版 历史 中 的 著名 字体 


字体 在 演化 过 程 中 ， 深 受 其 创作 媒介 的 强烈 影响 。 下 面 所 列 出 的 这 些 宇 体 在 排版 历史 中 都 
有 着 重大 意义 ， 如 果 想 要 了 解 更 多 关于 字体 类 别 ， 或 者 关于 不 同 场合 下 字体 选择 配对 等 信息 ， 
请 参阅 附录 A 
口 正方 形 大 写 体 (Square capital ) : 这 种 字 休 是 受 其 书写 用 笔 的 影响 ， 是 当时 罗马 人 所 用 的 
常见 字体 样式 


4 History of Graphie 


Doi dmum NIMARTISQ:DOLOSETD 


wi, CHAODENSOSDIVVMN 
公司 出 版 ， 转 载 获 


omwessw NEQVOCAPTAEDVMFYV 


司 许可 


口 机 糙 大 写 体 (Rustic capital ) : 这 种 字体 与 正方 形 大 写字 休 类 似 ， 但 针对 减少 笔画 和 用 纸 
莉 (因为 在 那个 时 代 ， 纸 张 是 极其 昂贵 的 ) 进行 了 优化 。 所以， 粗糙 大 写字 体 比 方形 大 
写字 体 更 紧凑 ， 而 且 字母 销 有 简化 


Mo TOCEANLSLRETQSIENEREPRPVL 
vs os NEAASIDVSIVGLENSVRLPLSCLS 


由 John Wiley & Sons 


公司 出 版 。 转 载 获 ORt(L RE RNANASCAELIONESCEN 


John Wiley && Sons 公 
司 许可 


口 图 拉 真 凯旋 柱 体 ( Trajan's Column ) : 尽管 在 罗马 城市 中 现在 仍然 可 以 看 到 与 之 类 似 的 文 
字 ， 但 图 拉 真 凯旋 柱 上 的 文字 被 认为 是 罗马 排版 艺术 的 荐 峰之 作 。 虽 然 这 种 字体 样式 并 
非 简单 几何 体 所 能 表达 ， 但 它们 都 遵循 着 几 种 基本 的 几何 形状 一 一 正方形、 三 角形 和 图 
形 ， 并 且 设计 者 经 过 审 愤 的 考量 ， 使 得 每 个 字母 本 身 的 形态 和 字母 内 部 及 字母 间 的 负 空 
间 达 成 平 街 。 不 过 ， 到 1989 年 Carol Twombly 对 它 做 出 改良 之 后 ， 这 种 字体 才 
在 近代 得 以 应 用 ,( 分 类 : 衬 线 字体 、 人 文 主义 字体 ) 


IN A WORLD 


口 信安 色 尔 休 (Half uncial ); 仿 安 色 汞 体 是 风行 于 希腊 时 代 的 完整 安 色 尔 体 的 改良 版 本 。 
注意 观察 文字 中 的 上 捅 笔画 〔ascender ) 与 下 降 笔画 【descender ) 的 特点 ， 比 如 在 字母 d 
和 中 表现 的 那样 = 
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4 History of Graphic 


Design, 3rd Edition, 


derUod7eec 王 cquerprnrcce- 

Meggs 著 ，1998 年 
Uoq mmoneltquraecpac John Wiley & Sons 公 
mafecfliareumdic fiaac 司 出 版 。 转 载 效 John 


Wiley & Sons 公司 许可 





口 卡 洛 六 (Carolingian minuscule ) : 在 整个 中 世纪 ， 随 着 罗马 寓 国 的 囊 落 ， 手 抄 字 
体 陷 入 混乱 由 于 





式 ， 所 以 创作 的 书 蘑 充 床 车 五 花 八 门 的 字体 。 在 查 
5 辽 用 的 字体 样式 ， 因 
文 种 字体 更 利于 快速 


-了 抄写 员 


的 起 


理 受 大 党 (Charlemagne ) 再 次 





生 的 卡 洛 宁 小 写字 体 正 姑 





而 且 更 加 节省 4 


dimizzereer” 


或 者 黑体 ) 深 受 抄写 员 的 喜爱 ， 因 为 它 
,使 得 整个 文本 段落 的 质感 与 节奏 都 变 





Typographic Design 
Faem rx{ Cormaairaion 
2nd Edition, Carter 


Day & Meggs 著 ， 
1993 年 由 John Wiley 
\ 司 出 版 


区 Sons 2 








转载 获 John Wiley & 


Sons 








古 腾 集 就 试图 让 文字 看 
用 来 改良 技术 


口 古 腾 堡 休 (Gutenberg ) : 从 创作 世界 上 第 一 部 印刷 版 圣 
E 少 花 赏 了 16 年 的 时 





彰 是 用 Textura 字 


Kelly McCarthy 摄 
http//www.flickr. com 


Peoplekellymccarthy/ ) 
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口 Jenson 字体 ; Nicholas Jenson 创造 了 第 一 种 真正 深 受 字 范 制作 ( puncheutting ) 国有 特性 
影响 的 字体 。 印 刷 术 扬 篮 期 的 印刷 者 误 将 卡 洛 林 小 写 体 的 手稿 当 作 十 罗马 字体 的 手稿 ， 
并 试图 复制 它 的 样式 。 但 是 由 于 手写 字母 失 角 太 多 ， 并 不 适合 凸 模 雕 刻 过 程 ， 而 且 这 些 
尖 角 会 致使 最 终 完成 的 铅 活 字 夹 带 过 多 的 油墨 ， 从 而 导致 印刷 时 产生 污渍 。( 分 类 : 衬 线 
字体 、 人 文 主义 字体 ) 


Itaq equis Roma pettit. R 
coOuiuio &luxu deprehédut 





口 Garamond 字 人 4 
具 可 读 性 的 字 


这 种 经 久 不 表 的 字体 进一步 隔离 了 手 
【 分类: 衬 线 字体 、 人 文 主义 字体 ) 





体 的 样式 ， 成 为 印刷 媒体 中 最 





米 源 :， Arminiuzz 


Quandoquidem finihil 
;,nihil denique diuinius 
口 Baskerville 字体 : John Baskerville 推陈出新 ， 使 得 然 张 更 加 光滑 清脆 ， 而 且 为 了 保持 


休 中 粗细 笔 耳 的 鲜明 对 比 , 他 每 次 印刷 之 后 都 会 重 铸 活字 ,( 分 类 : 补 线 字体 
现实 主义 字体 ) 





baskerville 





EBOOK of 


on Prayer, 





口 Bodoni 字体 : Bodoni 字 休 样式 完全 搜 开 了 笔 的 书写 效果 、 从 几何 字体 的 角度 将 字体 结构 
全 理化。 字体 中 由 粗 急 剧变 细 的 笔画 ， 是 几何 字体 精度 的 弧 形 美化 的 结果 ， 这 种 设计 中 
所 著 合 的 自我 意识 使 Bodoni 字体 成 为 许多 时 尚 杂 志 字 休 的 不 二 之 选 。( 分 类 ; 衬 贱 字体 ， 


Charlie Bites 








口 Slab-serif 字体 


性 的 





岂 四 | 翅 及 体 。 随 着 





,Vincent Figgins 设计 的 第 





4 History of Graphic 


KLMNOPQR 0 
STUVWXYZ6é,:;.- 和 


£1234567890O eA 











鳅 早 在 伊 特 合 里 亚 人 { Etruscans 二 已 经 在 使 用 此 字体 的 文字 
第 一 次 被 广泛 使 用 则 是 在 十 九 2 初 字体 壕 速 丰 告 海报 和 传单 中 流 
像 Bodoni 和 slab-serif 这 样 的 字体 已 经 捐 工具 所 带 来 的 样式 
无 补 线 字体 则 彻底 地 扒 弃 了 最 古老 的 书写 工具 村 





4 History of Graphic 
Design. 3rd Edition 
Meggs 著 ，1998 红 由 
John Wiley & Sons 

版 。 园 载 获 John 


Wilcy & Sons 公司 许可 


W CASLON JUNR LETTERFOUNDER 








似 于 海报 





为 了 村 年， 印刷 技师 开始 在 字体 大 各 种 各 翌 的 效果 ， 





4 History of Graphi 


Deyign, 3rd Edition 





降 ，1998 年 


H John Wiley & Sons 





转载 获 





John Wiley & Son: 


Art Nouveau 字体 美术 运动 回归 甩 












腓 字 局 Alphonse Mucha 
以 及 方 y 
jQuery 插件 试图 在 语义 网 类似 的 排版 类 体 ) 
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J Furura 林 : Paul Renner 创 地 拆 分 为 





带 有 明显 几何 特征 的 “ 上 作为 正文 显示 的 效果 非 Fk 好。 有 屏幕 像素 无 


二 处 理 出 辆 形 样式 


Numa Numa 


模仿 Akzidenz Grotesk 
也 时 





-] Helvetica 字体: Helvetica 


用 ， 其 至 还 有 一 部 关于 


Bubb Rub 





体 、 现 实 主义 字体 


. 





下 被 用 在 Macintosh 操作 系统 中 
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RICK Roll 


口 Adobe Garamond 字体 : Adobe 
年 前 Claude Garamond 时 期 的 






司 的 Robert Slimbach 使 用 现代 技术 改 种 近 400 


人 文 主义 字体 


Shetd Cat 


口 Georgia 字体 : 由 Matthew Carter 设计 而 成 ， 特 别针 对 屏幕 显 
字体 可 以 说 是 网 络 应 用 中 最 具 可 读 性 的 村 线 字体 【分 类 : 衬 线 字体 、 现 实 主义 字体 ) 


I Like Turtles 


口 Arial 字体 : 由 Robin Nichols 和 Patricia Saunders 在 1982 年 共同 设 i 
体 近 于 完美 地 横 仿 ， 但 为 了 更 加 兼容 旗 莫 显 " 信 Arial 字体 做 了 相 
的 调整 。Arial 字体 可 以 说 是 网 络 应 用 中 最 具 可 读 性 的 无 补 线 字 (分 类 ; 无 衬 线 字 体 、 
现实 主义 字体 ) 


Cuppy Gls 


， 也 是 有 史 以 来 第 一 种 即 
关于 Comic Sans 字体 的 故事 ,请 参阅 3.1 季 。( 妆 





示 的 限制 做 了 处 理 ，Georgia 





字体 是 





完成 ，Aria 





对 Helvetica 





口 Comic Sans 字体 : 数 以 再 万 计 的 幼教 # 
下 人 群 中 都 被 遗 至 的 字体 
无 宰 线 字体 、 展 示 字 体 ) 


Leeroy Jenkins 


3.5 ”经 久 不 豪 的 字体 








类 


着 , 但 大 多 数 人 还 是 能 对 排版 有 足够 的 
I 多 数 母 中 仍 能 看 
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卡 洛 林 小 写 体 创立 于 公元 800 年 左右 ， 作 为 查理 曼 大 帝 时 期 欧洲 的 标准 手写 字体 出 现 的 。 
但 在 欧洲 ， 卡 洛 林 小 写 体 最 终 被 哥 特 式 黑体 所 取代 ， 它 只 在 意大利 文艺 复兴 时 期 再 次 流行 过 。 


3.5.1 印刷 诞生 发 展 简 史 


历史 上 第 一 部 印刷 书籍 ， 是 由 古 腾 堡 印 制 的 “四 十 二 行 圣经 "。 其 活字 印刷 术 被 誉 为 有 史 以 
来 最 有 意义 的 独立 发 明 ”。 印 制 这 部 书 花费 了 古 腾 保 至 少 16 年 的 时 间 ， 他 不 断 完 善 印 刷 方法 ， 
刻 制 并 设置 圣经 的 活字 字体 ， 当 开始 印刷 时 已 经 快要 破产 。 

除了 创造 出 一 项 全 新 技术 之 外 ， 古 腾 堡 还 一 定 要 让 字母 尽量 完美 地 模仿 当时 最 为 流行 的 
textura ( 也 被 称 为 黑体 或 者 哥 特 体 ) 字迹 ， 这 就 使 得 整个 任务 显得 异常 艰难 。 但 他 最 终 的 成 果 
让 人 惊叹 不 已 ， 整 篇 古 腾 堡 圣经 内 容 的 质感 非常 匀称 ( 见 图 3-17 )。 后 来 ， 其 他 印刷 者 们 也 创造 
出 了 更 多 更 适合 这 种 划时代 创新 ( 活字 印刷 术 ) 的 字体 形式 。 


图 3-17 

古 腾 堡 “四 十 二 行 圣 
经 ”的 页 面 

Kelly MeCarthy 摄 
(http://wwwflickr.com/ 
people/kellymccarthy/ ) 





到 了 15 世纪 晚期 ， 印 刷 术 在 整个 欧洲 遍地 开花 ， 这 段 时 期 被 称 为 “印刷 术 摇篮 期 "， 印 刷 
者 们 开始 从 卡 洛 林 小 写 体 中 寻找 设计 字体 的 灵感 。 但 是 ， 随 着 活字 印刷 术 诞 生 所 带 来 的 挑战 ， 
全 新 的 字体 形式 也 应 运 而 生 。 

虽然 在 卡 洛 林 小 写 体 的 启发 下 ， 最 初 设计 的 几 种 字体 试图 完全 地 复制 手写 字体 ， 但 印刷 者 
们 很 快 就 发 现 ， 制 作 字 范 用 以 制作 活字 的 过 程 之 一 ) 的 过 程 却 更 适宜 采用 新 的 字体 ， 而 这 些 字 
体 至 今 仍 用 在 大 多 数 印 刷 品 上 。 


3.5.2 制作 字 范 : 不 变 文 字 的 摇篮 
除了 “不 变 的 文字 ”操纵 着 字母 的 形状 ， 当 今 的 字体 设计 师 几乎 不 受 任何 限制 。 所 谓 “不 


全 印刷 术 是 中 国人 最 时 发明 的 ， 时 为 雕版 印刷 。 此 处 所 提 的 活字 印刷 术 是 指 金属 活字 印刷 。 因 现在 还 没有 找到 有 说 
服 力 的 材料 证 明 中 国 的 活字 印刷 术 传 到 了 欧洲 ， 故 认为 古 腾 堡 的 印刷 术 是 一 项 独立 发 明 。 一 一 编者 注 
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变 的 文字 "， 其 样式 多 半 成 型 于 印刷 术 摇 篮 期 间 。 那 时 ， 在 欧洲 各 地 ， 层 出 不 穷 的 印刷 者 们 争先 
恺 后 地 印刷 书籍 ， 踊 跃 地 开拓 这 项 新 发 明 的 潜在 市 场 。 


印刷 者 们 很 快 就 发 现 ， 制 作 印 刷 所 用 铅字 的 过 程 完全 不 同 于 书写 文字 的 过 程 。 单 调 乏 味 的 
字 范 制作 过 程 反而 催生 出 新 的 字体 样式 。 


要 创作 一 个 字母 的 活字 ， 设 计 者 需 把 铅 溶 液 浇铸 到 铜 质 字模 可 以 反复 用 于 制作 同一 
字模 ) 中 。 而 铜 质 字模 上 的 阴 文 则 是 由 冲压 字 范 所 得 ( 见 图 3-18 )。 


图 3-18 


字 范 的 制作 过 程 包括 
Bl 一 系列 对 钢 模 ( 最 终 
用 于 冲压 铜 质 模具 ) 
的 刻 制 和 冲压 
反 反 向 同 模 。 反 向 凸 模 修 形 后 的 字 范 修 形 后 的 字 范 
反 向 凸 模 





久 反 向 凸 模 。 例 如 ， 
形状 相同 的 反 反 向 凸 






在 制作 活字 的 过 程 中 ,字体 设计 师 必须 先 要 制作 一 个 反 向 凸 模 ， 甚 
LE 字母 #H 中 的 字 染 ， 字 范 雕刻 师 首先 需要 在 钢 模 上 雏 出 一 条 与 字 
模 , 很 像 然后 用 该 模具 冲压 出 另 一 个 反 向 凸 模 ， 形 成 字 梁 的 止 向 效果 。 然 后 铂 平 并 硬化 
该 反 向 凸 模 ， 并 刻画 出 衬 线 的 部 分 形态 ， 以 便 将 来 冲压 上 下 两 边 的 做 后 用 这 个 
反 向 凸 模 冲 压 出 凸 模 , 也 就 是 字 范 , 形成 凸 起 的 社 字 梁 , 而 字 梁 周围 则 被 冲压 成 
再 用 精细 的 雏 刻 工 具 刍 出 字母 矿 的 外 缘 ( 比如 外 侧 的 衬 线 )。 接 下 来 用 制作 好 的 字 范 冲 压 铜板 
制 成 字模 ， 最 后 将 铅 合 金 溶液 注入 字模 ， 从 而 可 以 做 出 很 多 同一 字母 的 活字 

如 果 印 刷 者 需要 不 同 字号 的 活字 ， 那 么 他 必须 为 每 种 字号 重复 以 上 整个 制作 过 程 ， 这 一 过 
程 不 仅 十 分 痛苦 ， 而 且 成 功 的 把 握 也 很 小 ( 参见 第 7 章 ) 

自然 ， 在 这 种 制作 过 程 下 ， 想 要 精确 复制 手写 字迹 ， 其 难度 要 远大 于 对 手写 字迹 进行 修正 。 
于 是 ， 印 刷 者 们 就 选择 了 后 者 

此 外 ,设计 者 还 必须 考虑 字体 活字 设计 的 最 终 应 用 效果 。 把 每 一 版 面 中 的 所 有 活字 都 排列 
好 , 然后 涂 刷 上 油墨 , 将 内 容 印刷 在 纸 面 上 。 在 这 种 情况 下 , 油墨 厚度 以 及 字母 边缘 自然 “ 渗 出 ” 
的 墨迹 ， 使 得 要 想 精确 复制 手写 字迹 中 的 尖 角 变 得 不 切实 际 。 而 且 ， 制 作 这 些 带 有 尖 角 的 反 向 
凸 模 也 非常 困难 


3.5.3 威尼斯 与 文艺 复兴 


随 着 印刷 术 在 欧洲 的 传播 威尼斯 成 为 了 当时 印刷 业主 要 发 源 地 之 一 。 而 印刷 术 的 摇篮 期 
和 文艺 复兴 恰巧 处 于 同一 时 期 ， 所 以 在 商贸 中 心 威尼斯 ， 到 处 都 是 迷恋 古 希 腊 和 古 罗 马 文化 的 
富裕 文人 。 

出 于 对 古 罗 马 文化 的 着 迷 ，Nicholas Jenson 创作 了 沿用 至 今 的 Jenson 字体 ( 不 要 和 荷兰 字体 
Janson 混淆 )。Nicholas Jenson 字体 是 将 图 拉 真 凯旋 柱 字 体 中 平滑 的 字母 笔画 与 卡 洛 林 小 写 体 混 
合 处 理 而 来 ， 这 种 字体 的 现代 仿制 字体 仍然 是 当前 最 好 的 文艺 复兴 衬 线 字体 。 
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3.5.4 ”法国 和 Garamond 字体 


虽然 在 印刷 术 出 现 最 初 几 十 年 间 , 法 国 鲜 有 贡献 , 但 由 于 法 王 弗朗西斯 一 世 ( King FrancisI) 
对 艺术 的 支持 和 保护 ， 迄 今 为 止 最 伟大 的 一 种 字体 得 以 诞生 。 

Claude Garamond 字体 ， 今 天 被 简称 为 Garamond 字体 ， 从 意大利 印刷 者 的 设计 ( 比如 
Jenson 字体 ) 中 吸收 精髓 ， 通 过 使 用 紧凑 的 字 阶 、 平 滑 的 笔画 ， 使 得 文字 打印 出 的 质感 变 得 更 
加 匀称 ， 而 这 样 的 样式 更 多 是 受到 字 范 制作 过 程 的 影响 。 

纵 观 历史 ，Garamond 字体 一 直 被 误 认为 是 Jean Jannon 所 设计 字体 的 化 身 。 当 今 最 流行 的 
Garamond 进化 字体 一 一 Robert Slimbach 设计 的 Adobe Garamond 字体 一 一 仍然 保持 了 Garamond 
原始 字体 的 样式 。 但 是 ，Garamond 字体 的 设计 可 能 受到 了 Antoine Augereau ( Garamond 曾 是 其 
学 徒 ) 和 Geoffry Tory ( Garamond 曾 与 其 合作 ) 两 人 设计 风格 的 强烈 影响 。 

无 论 Garamond 字体 的 设计 源 自 哪里 ， 它 都 变 得 非常 流行 ,并 在 整个 欧洲 ( 除了 德国 ) 取 
代 了 Textura 字体 的 地 位 。 如 此 受 欢迎 的 部 分 原因 是 该 字体 非凡 的 品质 , 但 Garamond 先生 本 人 
也 对 该 字体 的 传播 有 着 不 小 的 影响 ,这 个 过 程 可 谓 喜乐 参半 。 他 创建 了 第 一 个 独立 的 活字 铸造 厂 ， 
向 印刷 者 们 售卖 活字 ， 但 死 时 却 一 贫 如 洗 ， 他 的 遗 媚 于 是 就 变卖 了 所 有 的 字 范 与 字模 ， 这 无 意 
中 让 该 字体 传播 得 更 为 广泛 。 


3.6 Garamond 字体 现状 : 为 什么 不 在 网 络 上 使 用 Garamond 字体 


如 今 ，Garamond 字体 仍 被 视 为 现存 最 好 的 字体 之 一 。 问 世 近 500 年 以 来 ，Garamond 字体 
始终 是 设计 师 们 会 用 到 的 字体 之 一 ， 它 既 精 致 又 易 读 ， 可 以 呈现 出 一 种 很 每 服 的 正文 质感 。 

在 1984 年 Macintosh 发 布 时 ， 广 告 上 用 了 一 种 Garamond 字体 。 从 美国 著名 儿童 文学 
作家 苏 斯 博士 的 教育 绘本 到 《 哈 利 * 波 特 》 Garamond 字体 已 被 广泛 用 于 无 数 书籍 及 出 版 物 
中 。 由 作家 Dave Eggers 创立 的 McSweeny 出 版 社 甚至 发 暂 ， 在 其 出 版 的 文学 期 刊 上 永远 只 用 
Garamond 字体 。 

20 世纪 90 年 代 初 ， 个 人 电脑 的 问世 ， 以 及 互联 网 翻天 覆 地 的 创新 ， 引 发 了 一 场 有 关 信 息 
共享 的 革命 。 任 何 拥 有 个 人 电脑 的 人 都 有 了 前 所 未 有 的 出 版 能 力 ， 而 且 任 何 使 用 互联 网 的 人 都 
能 轻松 获取 到 发 布 后 的 信息 。 

但 信息 的 传递 也 带 来 了 全 新 的 挑战 。 解 析 Web 语言 HTML 的 浏览 器 ， 却 只 能 使 用 客户 端 
电脑 上 可 用 的 字体 来 显示 内 容 。 加 之 来 自 布局 方面 的 其 他 挑战 ，Web 设计 师 们 ( 尽管 在 当时 ， 
Web 设计 师 很 少 ) 几乎 无 法 控制 访问 用 户 能 看 到 什么 样 的 字体 。 


3.6.1 “网 络 字体 ”的 诞生 


不 过 ,在 20 世纪 90 年 代 早 期 ， 正 在 迅猛 发 展 的 微软 公司 解决 了 这 一 问题 。 从 Windows 3.1 
开始 ， 一 组 字体 集 被 广泛 应 用 ， 并 随后 纳入 了 微软 1996 年 开始 的 “Web 核心 字体 工程 ”这 个 项 
目 制 订 了 一 系列 可 免费 获取 的 屏幕 字体 ， 使 应 用 于 互联 网 中 的 字体 保持 一 定 的 连贯 性 。 
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在 该 项 目 包含 的 字体 当中 ， 有 许多 仍 在 现今 的 Web 环境 中 流行 ， 它 们 包括 Arial 、( 悲剧 的 ) 
Comic Sans 、Georgia 、Times New Roman 和 Verdana 

今天 的 Web 设计 师 知 道 浏览 者 可 能 会 有 的 字体 ， 然 后 依 此 规划 自己 的 设计 。CSS 甚至 允许 
设计 师 列 出 多 种 可 选 字体 ， 以 便 设 置 最 佳 备用 字体 方案 

但 这 些 办 法 对 许多 设计 师 及 其 终 户 来 说 都 还 是 不 够 的 。Web 设计 时 仍 需要 坚持 一 些 精 
细 的 设计 偏好 以 及 品牌 指导 方针 ， 限 多 方法 用 于 解决 字体 选择 匮乏 的 问题 

设计 师 可 以 使 用 图 片 承载 文字 ， 但 这 样 文字 信息 就 无 法 与 HTML 的 语义 结构 相 兼 容 (除了 
被 包含 在 img 元 素 的 alt 属性 中 ), 设计 人 员 可 以 使 用 类 似 SIFR 这 样 基于 Flash 的 替代 方案 ， 
但 那些 正在 迅猛 发 展 的 移动 平台 ( 比如 iOS 系统 ) 并 不 支持 Flash。 与 此 同时 ， 其 他 一 些 字 体 幅 
人 手段 ， 比 如 Cuf6n 、Typekit， 以 及 Google Font API， 开 始 为 设计 人 员 所 看 好 

:， 继 续 使 用 旧 的 备用 网 络 字体 的 真正 原因 ， 跟 浏览 者 电脑 中 有 哪些 可 用 字体 无 关 ， 而 

本 身 密切 相关 。 就 如 加 洛 林 小 写 体 不 适合 字 范 制作 过 程 一 样 ， 像 Garamond 这 样 
优美 的 经 典 字体 也 和 如 今 的 屏幕 显示 不 兼容 ( 以 正文 尺寸 来 显示 时 ) 




























3.6.2 大 跃进 
除了 字 范 制作 工艺 衍生 出 Garamond 字体 外 ， 
而 像素 的 引进 则 股 计 师 看 到 了 一 线 明光， 他 f 


在 1984 年 发 布 的 首 款 Macinatosh 操作 系统 中 ， 界 面 元 素 都 像 是 用 乐 高 积木 拼 成 的 那样 而 且 其 
显示 模式 只 有 1 位 ， 每 一 像素 或 黑 或 白 . 仅 此 而 已 

如 此 苛刻 的 局 限 , 致使 那些 已 有 的 常用 字体 完全 失效 , 这 其 中 就 包含 Garamond 字体 。 因 此 ， 
革 果 公司 委托 Susan Kare 为 Macintosh 操作 系统 创作 了 Chicago 字体 ( 见 图 3-19 ) 








二 File Edit View Special 图 3-19 
Chicago 字体 充分 地 
en 利用 了 像素 环境 和 黑 


232K In disk 167K avafhable 


白 显 模式 
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用 于 印刷 或 大 尺寸 显示 时 ，Chicago 字体 效果 非常 丑陋 ， 但 该 字体 却 非 常 充 分 地 利用 了 其 所 
在 的 像素 环境 。Chicago 字体 使 用 了 大 量 厚重 的 垂直 线条 ， 不 仅 迎合 了 像素 的 直线 性 ， 而 且 也 营 
造 出 强烈 的 节奏 感 ， 让 人 不 禁 想起 印刷 古 腾 堡 圣经 所 用 的 texture 字体 。 这 些 厚重 的 垂直 线条 与 
纤细 的 像素 笔画 相连 接 ， 最 终 呈 现 出 每 个 字母 。 在 黑白 像素 的 显示 模式 中 ，Chicago 字体 显得 足 
够 厚重 ， 而 且 还 能 使 界面 中 不 可 用 的 菜单 选项 呈现 出 一 定 的 灰 度 。 

随 着 性 能 的 提升 ， 计算机 能 够 显示 更 多 的 色彩 ， 从 而 使 得 字体 中 的 细微 部 分 可 以 通过 一 种 
叫做 字形 微调 的 过 程 ， 轻 易 地 转化 为 像素 。 像 Chicago 字体 这 样 的 第 一 代 个 人 计算 机 字体 ， 只 
是 简单 的 位 图 ， 只 能 以 固定 尺寸 显示 。 新 一 代 的 字体 使 用 类 似 矢量 字体 ( TrueType ) 这 样 的 技 
术 来 切实 地 创建 字体 轮廓 ， 控 制 字 距 配对 ( 参见 3.1 节 内 容 )。 性 能 良好 的 计算 机 借助 TrueType 
信息 ， 可 以 显示 不 同 的 字号 ， 并 用 打印 机 打印 出 线条 平滑 的 文字 。 


3.6.3 ”缩小 差距 


随 着 计算 机 计算 能 力 的 提高 ， 可 用 色彩 数量 也 大 幅 增 加 ， 更 多 精致 的 排版 样式 也 得 以 呈现 
在 计算 机 显示 屏幕 上 。 新 一 代 的 字体 诞生 了 ， 它 们 既 不 像 Chicago 字体 那样 笨拙 厚实 ， 又 不 像 
Garamond 字体 那 般 纤 巧 微妙 。 

没有 哪个 字体 设计 师 设 计 的 字体 能 比 Matthew Carter 设计 的 字体 更 吸引 眼球 ， 更 具 统治 地 
位 。Carter 设计 的 字体 已 经 成 为 目前 网 络 上 的 标准 字体 ， 其 中 包括 Verdana 字体 、Tahoma 字体 
( Verdana 字体 的 轻 量 版 ) 和 Georgia 字体 

如 果 你 正在 寻找 Garamond 字体 的 网 络 奉 代 方 案 ， 那 么 你 会 发 现 没有 比 Georgia 字体 更 好 的 
选择 了 。 正 如 Garamond 字体 始 于 几 世 纪 之 前 ， 若 说 起 Georgia 字体 为 何 与 计算 机 屏幕 显示 如 此 
兼容 ， 则 要 从 距 其 设计 之 时 的 300 年 前 谈 起 ， 那 是 1692 年 。 

在 模糊 混乱 的 字体 分 类 中 ( 参见 附录 A )，Georgia 字体 被 认为 是 一 种 过 滤 字 体 。 第 一 种 过 
渡 字 体 是 Romain du Roi 字体 。 当 时 ， 为 了 给 皇家 印刷 所 设计 新 的 字体 ， 路 易 十 四 成 立 了 一 个 委 
员 会 ， 因 此 新 字体 的 设计 更 加 系统 科学 ， 而 不 是 像 Garamond 字体 那样 更 多 地 依赖 书写 样式 。 委 
员 会 采用 了 一 种 由 2304 个 正方 形 组 成 的 网 格 来 指导 字体 设计 ( 参见 图 3-20 )， 从 而 使 得 这 种 过 
渡 字 体 甫 一 开始 就 像 在 考虑 用 像素 来 显示 。 

由 于 Georgia 字体 继承 自 Romain du Roi 字体 ， 因 此 它 在 屏幕 显示 方面 有 着 天 然 的 优势 - 诸 
如 Georgia 字体 和 Romain du Roi 字体 这 样 的 过 渡 字 体 都 有 一 条 坚 轴 。 请 参看 图 3-21， 注 意 其 中 
的 Georgia 字体 字母 中 的 内 圆 负 空间 是 沿 垂直 竖 轴 左右 对 齐 的 ， 而 在 Garamond 字体 中 则 不 是 
这 样 。 垂 直 定 向 ， 这 一 创制 过 渡 字 体 所 用 网 格 的 副 产 物 ， 才 是 使 Georgia 字体 与 屏幕 显示 更 加 兼 
容 的 原因 之 一 

除 此 之 外 ，Georgia 字体 有 着 尖锐 的 衬 线 ， 而 在 带 有 人 文 主义 构造 ， 较 为 老 派 的 Garamond 
字体 中 ， 衬 线 显得 十 分 圆润 巧妙 。 请 观察 图 3-21 中 Garamond 字体 底部 那 条 细微 的 曲线 。 当 
Garmomnd 字体 以 小 尺寸 在 屏幕 显示 时 ， 这 样 的 细节 根本 是 看 不 到 的 。 





第 3 章 排版 的 媒介 和 样式 





Consbruction des Aeltres 
Capilales ODrowes 
9 ee 
































40 40 


Adobe Garamond Georgia 





3-20 

Romain du Roi 字 体 
的 字母 是 在 一 种 网 格 
中 设计 的 ， 该 网 格 包 
含 2304 个 正方 形 ， 
很 像 是 由 像素 结构 组 
成 的 现代 显示 屏幕 

4 History of Graphic 
Design. 3rd Edition, 
Meggs 著 ，1998 年 
由 John Wiley & Sons 
公司 出 版 。 转 载 获 
John Wiley & Sons 公 
司 许可 


图 3-21 

垂直 轴线 和 尖锐 的 衬 
线 ， 使 Georgia 字 
用 于 屏幕 显示 时 
Garamond 字体 有 优势 







如 果 访 问 www.designforhackers.com/moire.html ( 需要 安装 Adobe Flash )， 你 会 看 到 现代 的 
显示 屏幕 与 精细 的 曲线 样式 并 不 兼容 。 随 着 动画 中 的 同 轴 圆 尺寸 的 改变 ， 你 会 看 到 摩尔 纹 在 屏 
幕 中 跳跃 。 正 是 这 个 缺陷 使 得 许多 在 数字 革命 之 前 设计 的 字体 ， 在 屏幕 中 以 正文 尺寸 显示 时 效 


果 不 佳 。 
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从 图 3-22 可 以 看 出 ，Georgia 字体 在 屏幕 中 更 易 读 的 原因 主要 在 于 它 的 基准 字母 x 的 高 度 
偏 高 ， 这 就 使 得 其 字眼 与 其 他 的 字 谷 较 大 ， 让 字母 看 起 来 显得 更 大 ， 从 而 避免 了 像 小 写 e 这 样 
的 字母 变 得 混淆 和 难以 辨认 。 


图 3-22 字眼 


Georgia 字体 偏 高 的 的 
x 的 高 座 使 它 在 屏幕 Ther-fGx | he fOx SHO 


中 更 具 可 读 性 


类 似 Typekit 和 Google Font API 这 样 的 技术 ， 使 得 Web 开发 者 能 够 克服 可 用 字体 障碍 ， 并 
期 待 有 一 天 Web 设计 师 能 够 随心 所 欲 地 使 用 任何 喜欢 的 字体 。 同 时 ， 更 先进 的 显示 屏 技术 ， 比 
如 像 iPhone 4 所 采用 的 具有 326 像素 /英寸 的 视网膜 显示 屏 ， 有 希望 让 Web 排版 达到 纸张 分 辨 
率 的 高 度 。 想 使 Web 设计 师 与 开发 者 做 出 正确 的 字体 选择 ， 唯 一 方法 就 是 要 让 他 们 了 解 字体 的 
设计 初衷， 以 及 屏幕 技术 ( 或 者 任何 一 种 最 终 承载 设计 的 媒介 ) 的 限制 条 件 。 


3.6.4 ”包容 局 限 性 一 一 即使 会 很 拙劣 


当 一 种 新 媒介 旦 现 出 局 限 性 时 ， 一 些 设计 师 往往 不 会 选择 妥协 ， 而 会 在 包容 的 基础 上 进行 
创新 。 在 20 世纪 90 年 代 末 和 21 世纪 初 ， 许 多 Flash 设计 师 使 用 一 些 非常 小 的 字体 ， 清 晰 的 逐 
个 像素 显示 。" 像 素 字 体 "， 如 图 3-23 中 来 自 Craig Kroeger 的 Miniml ( www.miniml.com ) 的 字 
体 ， 被 设计 用 于 无 抗 锯齿 技术 的 特定 尺 十 显示。 为 了 创作 出 能 小 到 只 有 4 个 像素 高 度 的 字体 ， 
Kroeger 和 其 他 的 像素 字体 设计 者 们 研究 了 几乎 每 一 种 可 能 的 字体 。 


图 3-23 aeh 7 有 
来 自 wwwminimlcom Dt 


的 像素 字体 ， 拥 抱 像 aroh or 43 


素 限 制 ApcpEFaamneLrosoPane 


Soh 07 54 
ABCDEFONIJKLMNOPO 
Sarno7 5 
ABCDEFOMIJKLMNOPORSTY ~ 


ah a7 全 
ABCDEFOMIJELMNOPARS 


在 21 世纪 初期 ， 当 这 些 漂亮 的 迷你 艺术 品 遇 到 了 更 年 轻 的 目光 一 一 使 用 这 些小 字体 致使 许 
多 客户 要 求 我 “让 字体 更 大 些 ”。 

只 有 4 像素 高 的 字体 看 起 来 似乎 是 荒废 的 , 但 一 些 人 敢于 拿 像 素 实 验 ， 甚 至 进一步 创造 出 
子 像素 字体 ， 比 如 Miha Zajec 设计 的 Flea's Knees 字体 ( 见 图 3-24 )， 只 有 3 像素 高 ， 而 且 正 如 
Zajec 在 Typophile 论坛 介绍 这 款 字体 的 帖子 (www.typophile.com/node/61920 ) 中 承认 的 那样 ， 
这 种 字体 除了 可 能 被 用 于 16 像素 的 网 站 图 标 中 之 外 ， 没 有 什么 实际 的 用 处 ( 虽然 很 漂亮 )。 子 
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像素 字体 的 设计 实际 上 是 将 组 成 LCD 显示 器 像素 点 的 红 绿 蓝 条 纹 ( stripe ) 当 作 像 素 本 身 来 使 用 。 





a 了 图 3-24 
ee amos sr 子 像素 字体 借助 LCD 
A EFEHIJRLN, or RSSTU X 了 屏幕 像素 中 的 红 绿 蓝 






二 422 芝 条纹 开发 出 极 小 字体 





3.7 小 结 


从 一 开始 ， 排 版 就 不 仅 受到 语言 特征 的 约束 而且 也 受 其 媒介 属性 的 限制 ， 这 是 其 他 任何 
一 种 艺术 形式 所 不 能 企及 的 。 现 代 流 行 的 字体 形式 并 没有 彻底 地 背离 早期 的 印刷 字体 形式 , 但 
要 铭记 的 是 :Web 技术 需要 设计 能 满足 Web 独特 限制 的 字体 。 随 着 技术 的 进步 ， 经 典 字 体 有 望 
再 次 复兴 。 唯 一 能 够 确保 设计 师 在 特定 环境 下 使 用 正确 字体 的 方法 就 是 了 解 这 些 字体 的 来 历 ， 
以 及 影响 其 样式 的 相关 技术 和 媒介 。 
要 掌握 正确 的 方法 ， 除 了 大 量 思考 和 实践 之 外 没有 其 他 途径 ， 但 下 面 这 些 准则 将 有 助 于 提 
高 你 对 设计 的 理解 。 
口 了 解 各 种 不 同类 型 的 字体 ， 特 别 注意 谁 是 设计 者 ， 哪 些 技术 影响 了 设计 。 更 多 内 容 请 参 
见 附录 A。 
口 在 现代 的 屏幕 ( 大 约 100 像素 /英寸 ~ 150 像素 /英寸 ) 上 , 保持 Web 标准 字体 尺寸 小 
于 30 像素 。 
实在 字体 尺寸 超过 30 像素 时 ， 欢 迎 使 用 来 自 Typekit、Cuf6n 以 及 其 他 技术 的 自 定义 字体 ， 
但 要 确保 你 了 解 这 些 字体 ， 知 道 如 何 更 好 地 匹配 。 更 多 阅读 参见 附录 A 
口 避免 将 针对 屏幕 显示 设计 的 字体 用 于 打印 输出 - 
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在 第 1 章 和 第 2 章 中 , 我们 已 经 探讨 过 ， 设 计 是 多 “ 层 ” 产 物 ， 设 计 的 目的 是 构建 这 些 层 
次 的 基础 。 第 3 章 又 讲 到 ， 打 造 字体 的 媒介 是 如 何 与 字母 系统 相互 作用 ， 从 而 缔造 出 各 种 不 同 
字体 的 。 到 了 附录 A， 我 们 还 将 详细 阐述 ， 对 于 不 同 的 字体 样式 ， 特 定 的 哲学 与 文化 因素 是 如 
何 更 进一步 地 唤起 人 们 的 特定 情绪 的 - 

除了 创作 设计 产品 的 媒介 之 外 ,设计 师 身 处 的 时 代 环 境 对 其 创作 形式 也 有 着 巨大 影响 。 那 
些 成 功 的 设计 ， 引 领 了 潮流 趋势 并 最 终 经 受 住 时 间 考 验 的 成 功 设计 ， 传 递 着 ( 有 时 也 改变 了 ) 
其 所 在 时 代 的 精神 。 设 计 精英 们 审时度势 ， 顺 势 而 为 。 

这 种 媒介 、 技 术 和 文化 共同 的 产物 ， 就 是 大 多 数 人 所 认为 的 “风格 "。 它 常常 表现 为 艺术 运 
动 或 者 设计 潮流 。 对 于 旁观 者 来 说 ， 这 种 风格 无 非 是 “外 观 ”"， 但 这 种 “外 观 ” 是 诸多 因素 共同 
影响 的 结果 。 如 果 设 计 师 只 是 试图 复制 “外 观 "， 那 么 最 终 他 创作 的 东西 ， 可 能 仅仅 就 是 像 第 1 
章 中 史 带 夫 . 乔布斯 所 说 的 那 种 外 表 虚 饰 。 要 想 真正 创作 出 饱含 时 代 感 和 归属 感 的 设计 ， 设 计 
师 的 创作 过 程 必须 顺应 时 代 环 境 的 影响 。 


4.1 潮流 兴起 的 原因 


任何 重大 的 设计 潮流 .或 者 任何 重要 的 艺术 运动 ， 都 是 对 技术 与 文化 力量 的 反应 和 拥抱 。 
战争 、 饥 荒 、 改 朝 换 代 、 人 口 结构 变化 趋势 、 发 明 创造 ， 以 及 其 他 一 些 世界 性 的 事件 与 创新 
所 有 这 些 都 启迪 着 设计 师 ， 使 他 们 得 以 用 特殊 视角 来 审视 寻常 事物 ， 独 具 慧 眼 地 诠释 它们 。 时 
尚 由 此 诞生 ， 潮 流 得 以 确立 。 


4.1.1 印象 主义 的 诞生 


印象 派 艺术 运动 也 不 例外 。 这 种 开创 性 的 风格 为 现代 艺术 的 发 展 铺 平 了 道路 ， 至 今 仍然 是 
最 受 欢 迎 且 被 人 纷纷 效仿 的 画 风 。 





很 多 人 谈 起 印象 派 绘 画 时 ， 
以 会 呈现 出 这 种 画 风 ， 并 政 
的 技术 和 文人 

19 世纪 60 年 代 的 上 
艺术 与 政治 。 这 些 后 来 


些 日 后 成 








ES 
响 的 日 渐 前 弱 以 及 中 
不 断 壮大 的 中 产 阶级 队伍 ， 





命 正 在 酝酿 中 


热衷 于 参加 一 项 每 半年 就 在 巴 要 








次 的 艺 





少 龙 )。 沙 龙 的 组 织 者 与 赞助 方 是 法 国政 府 当 局 的 艺术 学 院 ， 由 于 巴黎 是 世界 艺术 的 中 心 
当 和 大 的 盛事 龙 评 委 会 挑选 出 数 千 幅 作品 来 参展 ， 这 些 作 品 把 展 





厅 空 间 填塞 得 满 满 当当 
在 起 初 的 一 百年 或 者 更 久 的 时 期 里 ， 新 古典 主义 风格 的 画作 在 沙龙 中 非常 流行 。 其 
通常 取 自 古 希 腊 和 古 罗马 的 历史 、 神 话 场 夯 风 则 采用 极 真 的 写实 风格 ， 例 如 雅克 


(The Oath of Horatii， 见 图 





材 





路 易 ， 大 卫 ( Jacques-Louis David 
4-1 )， 描 绘 了 荷 拉 斯 家 族 三 兄弟 叔 

总 而 言 之 ,在 印象 派 诞生 时 其 
透视 准确 ， 技 法 精湛 。 不 断 壮 大 的 中 7 上 希腊 和 古 罗马 的 辉煌 与 荣 焰 之 中 ， 
另 一 方面 世 着 新 得 到 的 资本 主义 自由 多 少 有 点 不 相称 ， 因 为 这 种 学 院 化 的 艺术 认 知 下 


是 精英 阶层 统治 巴黎 时 期 的 遗存 。 不 过 ， 这 一 切 都 在 1863 年 举办 的 沙龙 中 发 生 了 改变 








作 的 理解 是 非常 学 院 派 的 : 古典 场景 ， 











兄弟 的 宣 
雅克 -路 易 * 
大 卫 ( 1784 ) 作 ， 新 
古典 主义 作品 ， 印 多 
搬 逛 生 时 期 流行 风格 


的 代表 作 
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1. 印象 派 与 中 产 阶 级 


因为 一 些 未 知 的 甩 


京 因 ，1863 年 为 此 而 深 










感 愤 慨 ， 医 央 定 为 所 有 







千 选 者 沙 
的 观众 , 却 被 一 幅 
2 挑战 了 当时 中 产 阶 
男 不 过 是 “年 轻 人 的 六 剧 ” 


个 理由 很 荡 雇 ， 因 为 沙龙 和 其 他 大 








他 们 认为 








型 艺术 展 一 样 ,也 到 处 充斥 着 1 若是 理想 中 的 罗马 或 者 希腊 
而 马 奈 的 裸体 作品 画 的 却 é 有 像 罗 马 女神 维 纳 斯 一 样 侧 稍 着 或 
芽 着 眼 ， 而 是 坦 划 苛 c 着 或 者 柔顺 的 感觉 








华 * 马 奈 的 《 草 
地 上 的 午餐 》( 1863 ) 


日 常生 活 的 创作 主题 








几乎 和 画作 主题 一 样 ， 这 幅 画 绘画 手法 也 引起 了 
些 部 分 看 起 米 就 像 是 草稿 。 另 外 ， 画 面 各 


人 一 种 平面 感 


又 清晰 可 见 ， 而 且 某 
浴 女 也 比 其 应 有 比 





例 要 大 一 些 整 
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2. 印象 派 与 摄影 

在 得 到 大 众 认可 之 后 发展， 此 时 摄影 作为 一 种 新 的 艺术 形式 变 得 日 
益 普 及 ， 印 象 派 这 种 的 画 风 既是 对 摄影 这 种 新 生 事物 的 一 种 反应 ， 也 从 其 中 摄取 了 一 
定 的 灵感 。 印 象 派 “日 党 的 主题 与 摄影 的 即时 性 非常 契合 ， 因 此 这 些 作品 看 起 来 就 像 是 
用 镜头 抓拍 的 快照 一 般 ， 如 古 斯 塔 夫 ' 卡 耶 博 特 的 《雨天 的 巴黎 》( 见 图 4-3 )。 与 以 往 画 作 中 精 
心安 排 的 人 物 场景 不 同 ， 这 副 作 品 中 的 人 物 都 处 于 动态 ， 他 们 或 正 进入 视野 ， 或 正 离开 画面 





















图 4 

古 斯 塔 夫 ' 卡 耶 博 
特 的 《雨天 的 巴黎 》 
(1877) 中 
作 . 使 其 看 直 
巴黎 街道 的 一 幅 摄影 
快照 











既然 摄影 可 以 捕 提 真实 的 生活 镜头 ， 画 家 们 便 开 始 主动 寻求 ( 与 其 说 是 被 迫 的 话 ) 通过 作 
我 的 新 方式 。 到 19 世纪 80 年 代 未 ， 沙 龙 中 非常 流行 和 常见 的 印象 派 作品 ， 逐 步 让 位 
于 后 印象 派 作品 。 从 平面 化 构图 以 及 不 加 修饰 的 笔触 特点 起 ， 印 象 派 逐渐 对 画作 独特 的 色彩 笔 
触 与 观 者 的 观 这 两 者 的 关系 进行 更 深入 的 研究 。 只 需 看 一 眼 文 森 特 ， 梵 高 著名 的 《星夜 》 
( 见 图 4-4) 用 更 多 篇 幅 介绍 印象 派 及 后 印象 派 画家 在 色彩 
方面 的 研究 ) 
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后 印象 派 画 家 对 笔 
和 色彩 构成 做 了 进 
步 的 细 分 ， 如 的 
星夜 》( 1889 








3. 印象 派 与 现代 艺术 
印象 派 画家 大 
描绘 现实 的 工具 转变 
评论 社会 现象 ， 并 对 新 





术 的 发 展 铺 平 了 画 从 客观 
艺术 家 们 不 断 寻求 新 方式 来 表现 物质 世界 ， 
并 行 不 断 探索 

任何 一 出 


画 技 各 异 , 某 些 作 











看 到 


本 中 ， 你 都 可 能 





很 有 魅 


件 作 品 能 够 








很 多 与 印象 
但 相 较 于 真正 源 于 
与 文化 有 着 如 此 紧密 的 





文化 背景 下 的 画作 来 说 ， 迄 





和 要， 就 必须 对 所 处 时 代 的 技术 与 文化 因素 





提醒 要 全 








时 间 考 验 ， 具 有 历史 意义 而 被 载 和 人 史册 呢 ?7 时 间 
术 作品 无 疑 最 具 可 能 性 ， 而 且 其 中 革 种 艺术 





在 当今 的 艺术 与 设计 中 ， oe 东西 能 
是 最 好 的 见证 。 那 些 在 技术 与 和 
风格 肯定 就 与 Web 2.0 运动 有 关 

Web 2.0 运动 兴起 于 2005 年 左右 ， 其 特 ! 








认为 是 以 Web 应 用 为 中 心 ， 使 信息 得 以 在 网 络 
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用 户 间 得 到 共享 。 诸 如 Flickr、Blogger、Delicious 和 YouTube 这 些 Web 服务 都 从 用 户 共享 的 作品 
中 受益 匪 浅 。 这 种 用 户 生成 内 容 构成 了 此 类 服务 的 整体 价值 。 用 户 往 Flickr 中 存放 的 照片 越 多 ， 
照片 资源 库 就 越 庞大 ， 寻 找 某 种 题材 的 照片 就 变 得 越 容易 。 本 书 中 的 许多 照片 就 来 自 Flickr。 

Web 2.0 网 站 另外 一 个 特点 在 于 独特 的 平面 设计 风格 : 大 量 使 用 渐变 、 倒 影 和 圆 角 。 在 过 去 
10 年 里 ，Web 2.0 平面 设计 风格 已 经 无 处 不 在 , 许多 各 种 各 样 的 网 站 会 自动 弹出 广告 ( 很 可 笑 )， 
宣传 能 够 自动 生成 Web2.0 风格 的 Logo 或 图 形 的 服务 或 软件 。 图 4-5 中 所 示 的 Web 2.0 Logo 创 
建 器 ( 现 已 停止 服务 ) 就 是 这 样 的 一 个 例子 ， 它 可 以 创建 一 个 字母 带 有 渐变 效果 的 Logo， 另 外 
还 可 以 选择 是 否 为 其 添加 倒影 效果 。 

在 Web 2.0 运动 兴起 的 同时 ， 互 联网 上 出 现 了 很 多 非常 可 笑 的 Web 2.0 风格 的 平面 样式 ， 这 
主要 是 因为 ， 这 些 设计 的 创作 者 就 像 是 现在 的 “印象 派 画家 "， 他 们 只 是 复制 了 作品 的 “外 观 ”， 
却 没 有 理解 这 种 风格 的 内 涵 。 


ts 
WeR2:QY2HggR Greatr ee 





如 像 图 中 这 样 提供 
Web 2.0 Logo 创建 器 
Generator ( 现 已 停止 服务 ) 的 
Ry 网 站 
Tau mae wo20. Copyright © 2006 Alex P 
poo Retecton? 
YN 
aaeeraaar 
wemw0O 
[Eee 














1. 苹果 如 何 开启 了 Web 2.0 设计 风格 

要 想 了 解 Web 2.0 设计 风格 的 起 源 ， 我 们 必须 回 到 2000 年 1 月 份 的 Macworld 大 会 。 当 时 ， 
史 蒂 夫 ,乔布斯 发 布 了 Mac OS X 操作 系统 及 其 革命 性 的 Aqua 界面 。 乔 布 斯 所 介绍 的 Mac OS 
X 操作 系统 特性 让 台 下 观众 深 感 惊艳 ， 比 如 在 介绍 Geniez 特 性 时 ， 当 乔布斯 最 小 化 系统 中 的 窗 


外 Genie 在 阿拉 伯 神 话 中 被 称 为 “jinni"， 出 自 阿拉 伯 民 间 故 事 合集 《一 千 零 一 夜 》 中 的 《阿拉 丁 神 灯 ) 在 Mac OS 
X 中 ， 它 被 用 于 指 代 最 小 化 窗口 的 效果 ，Mac OS X 中 文 版 中 将 其 译 为 “神奇 效果 "， 神 韵 顿 失 - 一 一 编者 注 
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50 黑客 与 设计 : 剖 # 










口 时 ， 这 些 窗口 被 吸入 到 Dock 之 中 ， 就 像 灯 但 其 中 最 引 人 注 目的 革新 就 是 
界面 的 整体 外 观 效果 -“ 我 们 设计 的 一 个 目 本 它 。。 乔 布 斯 如 是 说 

这 是 乔布斯 对 Aqua 界面 评价 中 最 有 趣 的 部 到 外 ,Aqua 本 的 设计 灵感 的 确 来 源 了 村 生 
如 图 4-6 所 示 ，Aqua 的 设计 和 旨 在 匹配 华 多 彩 
苹果 设计 主管 乔纳森 ' 艾 维 在 设计 iMac 时 .为 了 寻找 灵感 
果 那 半 透 明 、 令 人 想 配 醋 的 质感 





曾 亲 自 跑 到 一 家 糖 采矿 里 去 研究 糖 





苞 果 Aqua 界面 灵感 
来 源 自 邦 代 蓝 的 iMac 
电脑 

Marcin Wichary 摄 

(http:/wwwflickrcom 


people/mwichary/ ) 





力图 在 软件 界面 中 呈现 迷人 物质 特性 的 欲望 深 深 根植 于 Mac OS X 的 设计 文化 之 中 。 归 根 
et 底 ,图 形 用 户 界面 ( GUI ) 也 是 一 直 在 通过 界面 隐喻 来 模仿 现实 世界 的 事物 。 我 们 四 处 拖 搜 “ 窗 
， 仿 佛 它们 就 是 我 们 “桌面 ”上 的 纸张 ,偶尔 也 会 将 “文档 ” 丢 入 “回收 站 ”中 。 大 多 数 电 
所 1 认为 这 些 都 是 理 所 ， 但 是 ， 当 年 施 色 先 开发 GUI 时 ， 利 用 现实 世界 中 的 物 
质 对 象 来 呈现 数据 却 是 划时代 的 发 明 
通过 Aqua 界面 , 竺 























度 ( 见 图 4-7 )。 它 的 表现 形式 超越 
按钮 及 其 他 按钮 , - 般 ， 
1 现 的 光 晕 。 管 
， 仿 佛 它 { 


面 隐喻 ?提升 
Aqua 中 的 复 
LL 过， 只 有 在 梦 
， 其 底部 都 有 着 

















点 面 这 文 种 时 





间 之 中 一 样 





加 界面 隐喻 是 指 , 用 户 界面 中 一 系列 的 视觉 效果 、 动 作 和 操作 流程 的 设计 ,借鉴 用 户 在 其 他 领域 已 获得 的 知识 和 经 验 ， 
一 一 译 者 注 
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Em 图 47 

© Mac OSX 的 Aqua 界 
] 面 中 的 元 素 有 着 梦幻 

人 三 上 } 上 般 的 超 现实 表现 


并 不 是 说 以 前 没 人 设想 过 这 种 绚丽 的 图 形 效 果 ， 只 是 因为 缺少 支持 这 种 界面 细节 泻 染 的 技 
术 。 苹 果 基 于 OpenGL 设计 了 一 种 被 称 为 Quartz 的 技术 ,借鉴 了 PDF 显示 技术 ， 能 够 快速 显示 
包含 透明 效果 、 基 于 路 径 的 形状 以 及 阴影 效果 的 用 户 界面 元 素 ， 同 时 实现 了 独立 于 设备 的 亚 像 
素 显 示 精 度 。Aqua 出 现 之 前 的 Platinum 界面 ( 见 图 4-8 ) 则 是 基于 QuickDraw 技术 一 一 在 界面 
内 用 光栅 图 像 绘 制 形状 ， 由 固定 像素 表现 出 来 


图 4-8 

操作 系统 Mac OS9 
采用 的 Platinum 界面 
依赖 于 QuickDraw 技 
术 ， 这 种 技术 无 法 绘 
制 出 如 Aqua 一 样 的 
精致 效果 





华 果 对 这 种 先进 技术 的 推行 过 于 草率 ， 以 至 于 用 户 开始 抱怨 。 的 确 ， 对 于 当时 的 电脑 来 说 ， 
Aqua 界面 太 耗 资源 ， 导 致电 脑 运行 缓慢 。 但 随 着 电脑 的 计算 能 力 最 终 提升 上 来 ， 现 在 其 他 的 操 
作 系 统 也 在 它们 界面 中 应 用 了 类 似 的 超 现实 显示 效果 。 


2. Aqua 对 Web 的 影响 

自发 布 以 来 , 华 果 机 都 是 设计 师 们 的 首选 , 所 以 他 们 自然 会 受 这 种 创新 的 Aqua 界面 的 影响 。 
当时 我 有 一 位 偏爱 Windows 的 同事 ， 当 他 在 我 背后 看 到 Mac“ 令 人 振奋 ”的 界面 时 ,非常 羡 莫 ， 
以 至 于 后 来 也 转 用 Mac 机 。 但 是 要 说 2001 年 发 布 的 Mac OS X 对 Web 平面 设计 产生 了 真正 意 
义 上 的 影响 ， 还 言 之 过 早 。 

当时 ， 只 有 37% 的 互联 网 用 户 拥有 能 够 显示 1600 万 色 的 电脑 ， 而 且 更 重要 的 是 ， 宽 带 上 
网 才刚 刚 开始 进入 普通 家 庭 。 因 此 ， 许 多 用 户 的 设备 还 没有 能 力 显示 这 类 图 形 ， 因 为 它们 大 多 
颜色 深度 不 够 ， 此 外 ， 网 站 的 加 载 时 间 也 是 一 个 重要 因素 : 即使 能 够 显示 ， 用 户 也 得 花 很 长 时 
间 去 加 载 它们 。 

除了 这 些 显示 方面 的 限制 之 外 ， 基 本 不 可 能 用 HTML 和 CSS 来 完成 这 类 设计 。Web 开发 人 
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员 仍 在 疲 于 应 对 IE 5 那些 不 可 预知 的 泻 染 bug， 而 IE 6 才刚 刚 发 布 。Web 设计 师 大 多 仅 限于 使 
用 CSS1 生成 的 方 角 〈 如 果 他 们 真 在 用 CSS 的 话 ) 以 及 用 纯色 块 填充 空间 。 

但 有 些 前 卫 的 Web 设计 师 们 并 不 打算 止步 于 此 。 在 2003 年 和 2004 年 , 像 AListApart ( www. 
alistapart.com ) 这 样 的 一 些 博客 共享 了 他 们 精心 设计 的 程序 。 这 些 程序 在 保持 跨 浏览 器 兼容 并 
尽量 缩短 了 页 面 加 载 时 间 的 同时 ， 还 可 以 实现 诸如 阴影 和 圆 角 等 效果 ( 参见 www.alistapart.com/ 
articles/cssdropshadows ), 

但 要 设计 出 Aqua 那 种 超 现实 主义 类 型 效果 ， 这 些 新 技术 仍 略 显 不足 。 在 这 方面 ，OpenGL 
功能 要 强 于 CSS， 但 设计 师 的 热情 被 激发 了 出 来 ， 他 们 努力 超越 CSS 的 简单 功能 ， 力 图 实现 更 
好 的 界面 与 图 形 。 


3. 当 Aqua 遇 到 Web 2.0 

最 终 ， 设 计 师 们 能 为 Web 页 面 设计 出 模拟 现实 的 图 形 ， 但 不 幸 的 是 ,许多 为 大 型 企业 工作 
的 设计 师 并 没有 机 会 去 尝试 新 技术 ， 而 且 有 些 保守 的 客户 情愿 使 用 当时 盛行 的 棱角 分 明 的 设计 ， 
也 普遍 不 愿意 尝试 新 的 设计 方案 。 

幸运 的 是 ， 对 一 些 设计 师 来 说 ，Web 2.0 革命 风暴 即将 来 临 。 一些 Web 应 用 框架 出 现 了 ， 
比如 像 都 在 2005 年 发 布 的 Ruby on Rails 和 Dijango， 它 们 使 开发 者 可 以 更 加 容易 地 构建 Web 应 
用 程序 ， 为 互联 网 用 户 带 来 他 们 渴望 的 社交 体验 。 

由 年 轻 开 发 者 组 成 的 小 型 团队 络绎 不 绝地 来 到 硅谷 ,纷纷 开创 公司 并 寻找 投资 ， 这些 人 中 
就 有 渴望 尝试 新 技术 的 设计 师 ( 包括 我 自己 )。 

这 些小 团队 有 着 很 大 的 自主 权 。 有 些 开发 者 辞 掉 大 公司 的 工作 ， 有 些 则 是 刚 走出 大 学 校门 
的 (甚至 是 退学 的 ) 学 生 ， 还 有 一 些 是 因 最 近 经 济 衰退 而 找 不 到 工作 的 受害 者 。 大 家 都 为 能 够 
照 自己 意愿 做 事 而 感到 兴奋 。 

2006 年 的 硅谷 ， 有 一 种 非常 具有 极 客 范 儿 的 兄弟 会 氛围 ， 或 者 说 类 似 于 前 文 提 到 的 19 世 
纪 60 年 代 巴 黎 盖 布 瓦 咖啡 馆 的 那 种 气氛 。 有 些 公司 ， 比 如 Meetro ( 基于 地 理 位 置 的 即时 通信 服 
务 提 供 商 ， 现 已 解散 )， 十 几 个 开发 人 员 挤 在 一 套 三 居室 的 公寓 中 ， 既 是 办 公 室 ， 又 是 宿舍 。 开 
发 人 员 和 设计 师 们 聚集 在 一 个 称 为 “ 超 快 活 开发 室 ”( SupperHappyDevHouse ) 的 房间 里 通宵 进 
行 “编程 马拉松 ”( hackathon 了”)， 讨 论 创意 ， 开 发 Mashup 应 用 。PBwiki ( 现在 的 PBworks ) 已 
由 托管 维基 提供 商 转型 为 在 线 协同 工具 提供 商 ， 它 就 是 从 这 种 即兴 团队 中 脱颖而出 的 创业 公司 。 
从 图 4-9 中 2006 年 8 月 PBwiki 的 主页 截图 可 以 看 出 , 它 在 设计 中 使 用 了 大 量 的 渐变 和 立体 元 素 、 
以 及 高 亮 显示 。 

这 些 公司 的 企业 文化 中 充满 了 朝气 。 像 *oops" 和 “hooray" 这样 俏皮 的 提示 信息 司空 见 惯 。 
在 谷歌 的 Gmail 中 ( 见 图 4-10 )， 你 仍然 可 以 看 到 这 种 开发 者 驱动 的 行文 风格 。 随 意 的 氛围 ， 
幽默 的 网 页 文案 .还 有 像 “ 不 作恶 ”这 样 的 公司 座右铭 ， 都 证 明 这 些 公司 已 经 从 先前 阻止 开 
发 者 创新 的 教条 企业 文化 中 获得 了 解放 。 


加 hackathon 是 指 一 种 开发 模式 ， 开 发 者 临时 组 队 ， 在 一 两 天 内 合作 开发 项 目 ， 往 往 疯狂 到 连续 作战 不 吃 不 喝 ,是 
程序 员 间 的 狂欢 或 竞赛 。 一 一 译 者 注 
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Web 2.0 就 是 要 使 网 络 社交 化 、 友 好 化 和 人 性 化 。 而 受 Aqua 界面 设计 启发 ， 具 有 生动 、 友 


好 外 观 的 平面 设计 ， 十 分 贴切 地 传达 了 这 一 点 。 


htp / /replay web arcnwe.org/20060828040939 /Pttp./ /pocom /© 
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在 硅谷 的 繁荣 背后 ， 虽 只 有 极 少数 创业 公司 能 取得 成 功 ， 但 疯狂 依旧 
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开发 人 员 通 力 合作 
构建 快速 项 目的 
Hackathons， 催 生 了 
像 PBwiki 这 样 的 创 
业 公司 

转载 获 PBworks 公司 
许可 


图 4-10 

Web 2.0 公司 朝气 随 
意 的 风格 仍然 存在 ， 
甚至 在 Google 的 Gmail 
服务 的 消息 中 也 能 
看 到 


YouTube 被 Google 


开价 16.5 亿美 元 收购 ，Yelp 在 热门 餐厅 点 评 领域 取代 了 Zagat 的 位 置 ，Facebook 最 近 的 估 值 超 
过 了 500 亿 美元 。 在 Web 2.0 莲 勃发 展 过 程 中 的 成 功 者 ,改变 了 人 们 的 交互 方式 ,甚至 成 为 了 主流 - 

并 不 是 每 一 个 Web 2.0 创业 项 目 都 运用 生动 的 按钮 、 渐 变 以 及 阴影 效果 ， 但 是 大 众 审 美 水 
平 也 在 与 时 俱 进 。 那 些 效仿 Web 2.0 风格 最 成 功 的 网 站 ,并非 对 视觉 风格 进行 简单 复制 ， 而 是 
吸取 了 超 现实 界面 的 特点 ， 而 这 通常 包含 某 些 形式 的 渐变 效果 、 贺 角 和 立体 按钮 等 。 Zappos. 
com ( 见 图 4-11 ) 最 近 握 弃 了 原来 棱角 分 明 色彩 单调 的 设计 风格 ， 转 而 寻求 更 加 友好 、 更 具 空 


间 感 的 设计 样式 。 
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图 4-11 
Zappos.com 最 近 更 新 
了 其 页 面 设计 ， 使 用 
了 更 多 的 圆 角 和 渐 
变 ， 另外 还 赋予 了 
所 ] 感 
转载 获 Zappos 零售 公 
司 许可 

















4. 这 一 
第 3 章 很 多 内 容 都 讲 到 工具 对 设计 样式 ， 但 这 一 次 ， de 
范 中 有 一 S 中 轻 区 、 
单独 设计 图 片 


第 4 章 技术 与 文化 


4-12 
Web 2.0 的 风格 特征 已 经 演变 为 CSS3 中 的 属性 ， 可 以 创建 出 类 
似 Aqua 风格 的 按钮 ， 如 www.girliemac.com 网 站 中 的 这 个 按钮 


转载 获 Timomi Imura 许可 


4.2 SEO 也 是 设计 


正如 我 在 第 2 章 中 所 说 的 ,设计 与 其 他 学 科 之 间 的 界限 变 得 非常 模糊 。 设 计 的 影响 愈加 重要 ， 
进而 就 要 求 设 计 师 必 须 具备 更 广泛 的 技术 背景 。 在 设计 传播 信息 的 博客 等 网 站 时 ， 或 者 是 设计 
任何 东西 的 时 候 ， 设 计 师 最 主要 的 工作 就 是 信息 交流 -。 正 因为 信息 交流 是 创作 设计 的 首要 前 提 ， 
所 以 熟练 的 Web 设计 师 一 定 要 了 解 SEO 最 佳 实践 

设计 ， 更 具体 地 说 排版 设计 ， 总 是 关于 信息 传播 的 。 确 保 目标 用 户 获取 信息 是 设计 师 的 职 
责 之 一 。 


信息 无 障碍 设计 


早期 的 书籍 抄写 员 不 知 疫 修 地 劳作 ， 用 清晰 可 读 的 瀑 亮 字体 美观 又 高 效 地 抄写 出 来 但 在 
当时 ， 只 有 极 少 数 人 有 能 力 阅读 ,更 别 说 拥有 一 本 书 了 。 那 时 通常 只 有 供 神职 人 员 阅 读 的 宗教 
内 容 书 夭 ， 并 且 非 常 兄 贵 ， 抄 写 也 很 费 人 力 。 当 古 腾 保 发 明了 印刷 机 之 后 ， 书 籍 的 生产 成 本 开 
始 下 降 ， 文 化 才 得 以 传播 。 

这 场 文化 传播 的 先驱 者 之 一 是 奥 汞 人 德 斯 ， 马 努 蒂 乌 斯 (Aldus Manutius )。 印 刷 术 的 发 明 使 
他 有 机 会 传播 和 保存 希腊 古典 文学 。 因 此 ， 马 努 带 乌 斯 在 威尼斯 成 立 了 自己 的 印刷 厂 ， 并 雇用 
希腊 学 者 来 编辑 手稿 、 检 查 校 样 。 他 还 聘请 了 字体 设计 师 Francesco Griflo， 委 托 其 设计 制作 了 
最 早 的 斜体 字 ( 以 便 节 省 空间 ) 等 字体 ， 当 今 的 一 些 流行 字体 也 深 受 这 些 字体 的 启发 。 马 努 蒂 
岛 斯 不 知 疲倦 地 传播 着 希腊 文学 ， 为 此 他 需要 创造 出 一 种 能 够 使 书籍 畅销 的 版 式 设计 。 

马 努 带 包 斯 的 创意 后 来 演变 成 了 我 们 今天 的 平装 书 ， 在 此 之 前 ， 多 数 书籍 都 又 大 又 重 ， 但 
马 努 蒂 乌 斯 设计 的 8 开本 版 式 只 有 9.5 厘米 x15.2 厘米 ,故而 可 以 很 轻松 地 随身 指 带 。 这 一 书本 
版 式 极 具 吸 引力 ， 至 少 对 当时 那些 住 在 成 尼斯 的 政府 高 官 与 军官 来 说 ， 它 已 经 够 便宜 了 。 

从 1501 年 开始 ， 马 努 带 乌 斯 使 用 这 种 8 开本 版 式 出 版 了 维 吉 东 、 柏 拉 图 、 亚 里 士 多 德 等 人 
的 一 些 著作 ， 并且 最 终 获 得 了 威尼斯 政府 授予 的 希腊 著作 从 断 出 版 权 - 

落 没 有 马 努 带 乌 斯 的 创新 ， 硕 脂 文 学 可 能 对 西方 文化 不 会 产生 如 此 深远 的 影响 。 通 过 对 困 
书 版 式 加 以 创新 ， 他 赢得 了 起 要 赢得 的 客户 ,传播 了 起 要 传播 的 信息 

实用 性 设计 是 现代 设计 排版 运动 的 关键 所 在 。Jan Tschichold 在 其 1928 年 出 版 的 The New 
Tipography 中 ， 开 始 建 立 规范 的 商业 交流 标准 ， 以 便 在 现代 社会 的 背景 下 实现 高 效 沟 通 。 除 了 
提出 将 商业 文件 打印 在 标准 大 小 的 纸张 上 以 便于 看 禄 外 ，Tschichold 还 建议 ， 在 导购 几 起 作 玫 
印 上 特定 信息 ， 以 便于 按照 姓名 、 联 系 地 址 等 信息 进行 归档 和 分 类 - 


55 


56 





黑客 与 设计 : 剖析 设计 之 美的 秘密 


通过 拖 恒 玉 传播 机 起 这 一 基本 理念 仍 
设计 师 的 使 命 之 一 就 在 于 要 将 
寻找 相 关 信 息 的 人 
但 是 ， 现 代 设计 师 却 常常 忘记 这 条 重要 原则 。 设 计 师 与 客户 经 常 发 现 自 i 

面 美化 和 用 户 体验 ， 却 忽略 了 信息 的 底层 结构 。 对 Flash 的 轻率 利用 ， 将 信息 数据 封闭 起 来 ， 
得 信息 婚 无 法 被 搜索 引擎 探测 到 ， 也 无 法 通过 浏览 器 页 面 的 查找 命令 找到 ， 从 而 缩小 
信息 传播 范围 

我 曾 看 到 过 一 些 漂亮 网 站 ,内容 也 非常 有 趣 ， 但 它们 都 是 基于 Flash 技术 构建 的 网 站 ， 因 此 
从 网 站 中 复制 出 来 的 文本 信息 ， 在 Google 中 是 搜索 不 到 任何 结果 的 。 所 有 这 些 重要 的 信息 都 被 
封锁 在 了 Flash 之 中 。 即便 这 些 网 站 的 Flash 设计 使 用 了 搜索 引擎 友好 的 方式 ， 你 从 搜索 引擎 中 
可 以 找到 起 要 的 信息 ， 但 却 无 法 使 用 浏览 器 的 查找 命令 搜索 到 相关 的 关键 词 

出 于 对 搜索 引擎 友好 度 的 考虑 ， 以 及 为 了 让 用 户 能 够 正常 使 用 浏览 器 的 工具 ， 
不 采用 HTML+CSS 来 进行 设计 ,尽管 这 种 技术 组 合 中 存在 一 定 的 限制 ,但 设计 师 必须 轴 受 
随 着 HTML5 的 出 现 ， 这 种 限制 变 得 越 来 越 少 了 ， 但 是 不 管 怎样 ， 设 计 师 最 好 使 用 纯 HTML 

这 样 做 的 原因 是 ， 设 计 除 了 真正 的 可 见 部 分 ( 文字 、 图 片 等 内 容 ) 之 外 ,还 有 隐藏 其 下 的 
HTML 语义 语言 。HTML 语义 语言 将 信息 转换 成 结构 化 的 层次 ， 这 赋予 网 络 以 力量 ,使 其 具有 
了 惊人 的 信息 搜索 能 力 。 设 计 师 应 该 了 解 这 种 信息 结构 ， 这 样 就 能 将 SEO 设 佳 实践 融入 网 站 的 
设计 之 中 ， 启 得 预期 的 客户 


然 是 设计 的 根基 所 在 - 你 在 设计 时 ， 就 是 在 试图 传达 
传递 给 需要 它们 的 人 。 特别 是 那些 正在 积极 努力 











十 师 不 得 












SEO 的 基础 原理 非常 简单 。 似 乎 每 一 个 Web 从 业者 谈 起 SEO 都 头头 是 道 ， 但 有 时 候 ，SEO 
最 佳 实践 的 应 用 率 之 低 让 我 感到 吃惊 。 所 以 我 们 需要 简单 回顾 一 下 ，SEO 为 何如 此 重要 ， 它 的 
工作 原理 是 什么 ， 以 及 如 何 确保 自己 的 做 法 是 最 正确 的 。 





注意 ”我 会 以 Google 为 代表 讨论 SEO, 因为 Google 基本 上 会 带 来 最 大 的 导入 搜索 流量 。 此 外 ， 
如 果 你 的 网 站 在 Google 中 排名 较 高 ， 那 么 在 其 他 搜索 引擎 中 的 排名 也 不 会 差 到 哪里 去 。 





7 年来， 我 一 直 在 尽量 按照 SEO 的 最 佳 实践 来 管理 我 的 博客 kadavy.net， 从 下 图 可 看 出 博客 
的 搜索 流量 在 稳步 上 升 ( 见 图 4-13 )。 
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4.2.1 理解 SEO 的 重要 性 


SEO 对 于 网 站 业务 的 重要 性 ， 恰 好 可 以 用 房地产 行业 的 那 句 名 言 来 形容 :“ 地 段 ， 地 段 ， 还 
是 地 段 。” 如 果 在 闹市 区 拥有 一 家 自行 车 店 ， 总 会 卖 出 一 些 自行 车 。 不 管 价格 有 多 高 ， 抑 或 员工 
服务 态度 有 多 差 , 总 能 做 成 一 些 生意 。 同 理 .如 果 网 店 在 Google 的 “自行 车 ”搜索 中 排名 很 靠 前 ， 
也 可 以 销售 出 很 多 自行 车 ， 因 为 很 多 人 在 搜索 “自行 车 "。 这 就 是 你 的 客流 量 。 

可 能 不 是 每 个 人 都 清楚 关键 词 排名 靠 前 意味 着 什么 。 如 果 你 在 销售 一 种 产品 或 者 服务 时 ， 
能 在 相关 的 关键 词 搜索 中 排名 靠 前 ， 那 就 意味 着 基本 是 净 赚 。 如 果 某 网 站 在 Google“ 自 行车 ” 
关键 字 搜索 中 排名 第 一 ( 当然 , 这 近乎 不 可 能 ), 那么 会 有 无 数 的 访问 者 在 该 网 站 上 寻找 自行 车 ， 
而 这 一 切 并 不 需要 你 付出 任何 成 本 。 这 被 称 为 自然 流量 ， 是 SEO 给 你 的 恩赐 。 

但 是 ,如 图 4-14 所 示 , 为 了 获得 访问 量 ,一 些 企业 不 惜 花 大 价钱 来 购买 Google 的 广告 关键 字 。 
在 这 种 情况 下 ， 他 们 的 网 站 会 紧 随 Google 自然 搜索 结果 ， 每 当 有 人 通过 链接 进入 他 们 网 站 ， 这 
些 企业 就 需要 向 Google 支付 费用 , 对 于 关键 字 ”bicycles" ,这 些 企业 平均 为 每 次 点 击 支付 71 美 分 ; 
而 对 于 关键 词 “Cambria bicycle" ， 厂 商 则 平均 要 为 每 次 点 击 支付 12.55 美元 。 






付费 的 搜索 结果 


图 4-14 
免费 的 自然 搜索 流量 
才 是 完美 的 








免费 的 自然 搜索 结果 





如 果 广 告 营销 活动 运作 得 当 , 网 站 转化 率 较 好 时 ,为 流量 付费 也 是 有 利 可 图 的 。 但 是 很 显然 ， 
能 将 免费 的 流量 转化 为 巨大 的 商机 才 是 完美 的 一 一 这 就 是 为 什么 SEO 如 此 重要 的 原因 。 
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4.2.2 选择 恰当 的 关键 字 


在 确信 你 所 用 的 是 SEO 最 佳 实践 之 前 ， 有 必要 先 弄 清楚 你 想 获得 哪些 关键 字 或 者 关键 词 的 
高 排名 。 因 为 你 选择 的 某 个 描述 性 关键 词 ， 并 不 一 定 会 吸引 网 站 上 的 用 户 。 你 选择 的 关键 词 必 
须 是 人 们 搜索 时 实际 用 到 的 。 关 键 词 “口腔 诸 肿 ”为 我 的 博客 带 来 了 巨大 的 访问 量 ， 因 为 当 人 
们 患 上 粘液 囊肿 ( 其 实 就 是 一 种 唾液 腺 阻塞 时 , 才 会 去 搜索 这 些 关键 词 。 大 多 数 人 不 会 去 搜索 “ 粘 
液 豆 肿 ”， 因 为 在 患 上 该 病 并 上 网 搜索 之 前 ， 他 们 甚至 都 不 知道 有 这 么 个 病 。 

在 理想 状态 下 ， 网 站 中 的 每 个 页 面 都 应 该 匹配 两 三 个 既 能 描述 页 面 内 容 ， 又 能 带 来 可 观 搜 
索 量 的 关键 词 ， 这 样 网 站 才 有 竞争 力 。 

使 用 Google 关键 字 工 具 ( http://adwords.google.com/selecUKeywordToolExternal )， 你 可 以 查 
出 每 个 关键 词 的 搜索 量 。 如 果 你 刚刚 开始 运营 一 个 销售 自行 车 的 网 站 ， 就 能 在 月 均 搜索 量 超过 
700 万 的 关键 字 “bicycles” 的 搜索 中 取得 较 高 排名 ， 那 是 再 好 不 过 了 一 一 但 是 这 对 新 网 站 来 说 根 
本 没有 可 能 。 如 果 你 运营 的 网 站 是 某 个 芝加哥 自行 车 实体 店 的 在 线 商 城 ,那么 匹配 关键 词 "chicago 
bicycle shop” 很 可 能 会 为 你 的 网 站 带 来 更 好 的 运气 ， 因 为 图 4-15 中 这 组 关键 词 的 月 搜索 量 仅 有 
可 怜 的 390 次 。 一 旦 你 在 这 组 关键 词 的 搜索 排名 中 占据 了 优势 ， 接 下 来 你 就 可 以 尝试 去 匹配 月 
搜索 量 达 6600 次 的 关键 词 “bike shop in chicago” 





图 4-15 刚 开始 运营 时 ， 用 这 个 关键 词 要 比 用 这 个 关键 词 更 有 竞争 力 

如 果 刚 开始 运营 网 站 ， 

与 高 搜索 量 关键 词 相 。 
比 ， 在 低 搜索 量 的 关 | 口 “ee PP nae sores 四 Celine © 
键 词 中 可 能 会 更 容易 ”| 本 rt 
占据 较 高 的 搜索 排名 全 轩 ME 





从 网 站 现 有 数据 中 寻找 关键 字 因 素 是 比较 好 的 方式 。 如 果 你 的 网 站 还 没有 安装 数据 统计 软 
件 包 ， 那 么 就 应 该 安装 一 份 。Google Analytics ( http://analytics.google.com ) 就 非常 不 错 ， 而 且 
是 免费 的 。 如 果 你 恰巧 已 经 在 使 用 Google Analytics， 那 么 可 以 在 Traffic Sources ( 流量 来 源 ) 一 
Keywords ( 关键 字 ) 中 看 到 访问 者 是 通过 哪些 关键 字 找 到 你 网 站 的 〈 如 图 4-16 所 示 )。 在 这 里 ， 
你 可 以 看 到 哪些 关键 字 带 来 了 最 大 的 流量 ， 而 且 如 果 你 已 经 设置 了 电子 商务 或 者 市 场 营 销 ( 比 
如 潜在 客户 开发 ) 的 目标 ， 那 么 你 可 以 看 到 哪些 关键 字 真 正 转化 为 了 业务 。 你 还 可 能 会 发 现 几 
个 搜索 排名 超过 预期 的 关键 字 。 那 么 基于 已 有 的 优势 ， 针 对 这 些 关键 字 或 者 相关 关键 词 做 进 一 
步 的 优化 以 获取 更 多 的 成 功 ， 是 个 不 错 的 主意 。 寻 找 那些 你 还 没有 用 到 的 同义词 ( 肿块 / 妻 肿 ， 
口腔 /嘴唇 )， 然 后 依 此 更 新 内 容 。 
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你 可 以 通过 设 定 目标 (比如 购买 量 或 新 闻 订 阅 会 员 数 ) 图 4-16 
a 在 Google Analytics 数 
et oe 据 中 可 能 会 看 到 一 些 
意外 的 惊喜 ， 你 可 以 
借 此 改进 SEO 策略 
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通过 分 析 ， 你 会 确切 地 知道 人 们 究竟 使 用 哪个 关键 词 造访 网 站 。 
这 其 中 可 能 会 有 些 意 想不到 的 收获 ! 





一 个 。 我 们 所 知道 的 是 ; 页 面 ， 
其 是 针对 所 讨论 的 主题 ) 能 够 极 


4.2.3 页 面 内 容 与 代码 


页 面 中 的 内 容 ， 也 就 是 页 面 中 的 文字 ， 对 页 面 在 给 定 关键 字 下 的 搜索 排名 有 着 巨大 的 影响 。 
如 果 目 标 关键 字 没 有 出 现在 页 面 内 容 中 ， 那 么 这 个 关键 字 将 很 难为 网 站 取得 较 高 的 搜索 排名 。 
但 这 也 不 是 绝对 的 ， 我 稍 后 再 作 和 解释。 与 关键 字 相关 的 内 容 也 必须 包含 在 页 面 当 中 ， 而 且 要 以 
代码 的 方式 ， 而 不 是 以 图 片 的 方式 ， 这 样 才 能 便于 搜索 引擎 假 虫 ( 抓 取 页 面 的 机 器 人 ) 阅读 这 
些 内 容 ， 然 后 在 合适 的 关键 字 中 为 页 面 评定 排名 。 这 就 是 Flash 网 站 对 搜索 引擎 不 友好 的 原因 ， 
也 是 以 前 仅仅 使 用 所 见 即 所 得 ( WYSIWYG ) 编程 工具 设计 页 面 的 平面 设计 师 制 作出 的 网 站 搜 
索 效 果 糟 糕 的 重要 原因 一 一 真正 的 内 容 被 隐藏 了 起 来 ， 网 络 疏 虫 们 无 法 抓 取 到 它们 。 

而 且 , 在 编写 页 面 时 保持 良好 的 编程 习惯 也 是 非常 有 必要 的 。 编 写 HTML 是 有 标准 可 循 的 ， 
这 些 标准 有 助 于 按照 重要 性 对 页 面 中 的 内 容 块 进行 排序 。 而 这 又 有 助 于 搜索 引擎 了 解 页 面 中 重 
要 信息 和 不 重要 信息 之 间 的 差异 ， 从 而 将 页 面 按照 不 同 的 关键 字 排 序 。 

以 下 是 对 那些 基于 网 页 内 容 ， 决 定 网 页 在 搜索 引擎 上 排名 的 重要 因素 的 总 结 。 


1. URL 

在 搜索 引擎 机 器 人 读 取 页 面 中 的 HTML 代码 之 前 ， 它 会 先 读 取 页 面 的 URL。 因 此 URL 的 
内 容 会 对 页 面 在 搜索 引擎 中 的 排名 有 相当 大 的 影响 。 所 以 ， 如 果 我 的 自行 车 网 店 地 址 为 http:// 
bikeshopinchicago.com， 那么 它 在 关键 词 “bike shop in Chicago” 的 搜索 排名 中 就 会 取得 非常 
靠 前 的 成 绩 。 如 果 我 的 网 站 中 有 针对 Cambria bicycles 的 页 面 ， 我 可 能 会 关联 到 地 址 http:// 
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bikeshopinchicago.com/cambria-bicycles。 要 注意 的 是 ， 在 将 顶级 关键 字 写 和 你 所 购买 的 域名 之 
前 , 需要 三 思 而 后 行 ， 因 为 品牌 名 称 以 及 对 未 来 业务 的 拓展 规划 ， 同 样 也 很 重要 。 总 之 ,你 
的 URL 最 好 是 由 对 搜索 引擎 ( 同时 也 对 用 户 ) 友好 的 简单 词汇 组 成 ， 而 不 是 像 http://example. 
com/?p=34 这 样 没有 特点 


2. Title 标签 

Web 页 面 中 的 标题 标签 ( title 标签 ) 最 能 代表 页 面 内 容 的 信息 ,但 很 多 企业 却 错误 地 将 
标题 标签 命名 为 “Home Page"， 或 者 根本 忽略 了 它 的 存在 ( 这 就 是 为 什么 当 索 “Welcome 
to Adobe GoLive” 时 ,会 得 到 一 堆 搜索 结果 的 原因 )。 对 于 网 站 中 的 每 一 个 页 面 ， 页 面 标签 都 应 
该 包含 你 想 获 得 高 排名 的 关键 字 , 如 图 4-17 所 示 。 当 网 站 主页 或 者 网 店名 称 包含 了 目标 关键 词 时 ， 
最 好 在 标题 标签 中 追加 上 网 站 的 名 称 。 比 如 .如 果 网 店 叫做 “David's Bike Shop" 那么 你 的 页 


















面 标签 应 该 是 “Bike Shop in Chicago - David's Bike Shop” 
4-17 

Tidle 村 页 面 在 哪 

些 关键 字 下 的 搜索 排 

名 较 高 有 强烈 的 影响 


转载 获 Arlo 公司 许可 





3. 元 标签 
在 搜索 引擎 评估 页 面 时 ， 元 标签 ( meta 标签 ) 包含 的 一 些 信息 也 占 了 很 大 的 权重 。HTML 
中 有 几 种 不 同 的 meta 标签 ， 但 你 应 该 关注 description meta 标签 。 如 图 4-18 所 示 ， 这 是 
-个 很 简短 的 页 面 内 容 描述 ( 大 概 有 200 字 左 右 )， 和 凭借 这 段 描述 ， 搜 索引 擎 不 仅 可 以 评估 页 面 
的 内 容 ， 而 且 当 页 面 出 现在 搜索 结果 中 时 ， 搜 索引 擎 还 会 把 这 段 描述 显示 给 搜索 用 户 
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4. Header 标签 

接 下 来 就 到 了 HTML 页 面 中 的 header 标签 了 。 标 题 按 重要 性 顺序 排序 依次 为 : HI 、H2、 
H3、H4、H5 和 H6。 页 面 中 应 该 只 有 一 个 Hl 标签 ， 而 且 页 面 的 真正 标题 ( 可 能 和 title 标签 
中 的 内 容 一 样 ， 也 可 能 不 一 样 ) 应 该 用 HI 标签 标记 出 来 。 有 些 人 喜欢 用 Hl 标签 做 Logo 和 首 
页 链接 ， 这 就 得 看 你 网 站 内 容 的 专注 程度 了 。 如 果 网 站 中 有 很 长 的 纯 文本 文档 ， 那 么 将 它 拆 分 
成 几 部 分 ， 并 加 入 一 些 有 用 的 ， 同 时 也 包含 一 些 目标 关键 字 的 标题 ， 会 是 个 不 错 的 主意 。 


5. 内 容 ，em、strong 和 img 标签 

终于 到 了 页 面 实际 内 容 的 部 分 ， 希望 你 的 这 些 内 容 对 访问 者 来 说 有 所 帮助 、 饶 有 风趣 ， 而 
且 同 时 包含 目标 关键 词 。 除 了 目标 关键 字 之 外 ,有 些 访问 者 是 从 一 些 “ 长 尾 ” 关键 词 搜索 而 来 的 ， 
而 这 些 “ 长 尾 ” 关 键 词 通常 是 从 出 色 的 页 面 内 容 中 恰巧 凸显 出 来 的 。 

在 页 面 内 容 中 ， 你 会 希望 点 绷 一 些 图 片 ， 因 为 这 有 助 于 用 户 阅 读 。 对 搜索 引擎 来 说 ， 图 片 
文件 的 名 称 和 页 面 的 URL 几乎 一 样 重要 ， 因 此 对 图 片 的 命名 要 有 描述 性 。 比 如 网 站 中 有 一 张 山 
地 自行 车 的 JPEG 文件 ， 那 它 的 名 称 应 该 是 mountain-bike.jpg， 或者， 更 进一步 ， 还 应 该 
包含 颜色 和 品牌 : mountain-bike-schwinn-blue.jpg。 而 且 img 标签 的 alt 属性 也 应 该 是 
描述 性 的 ， 比 如 blue schwinn mountain bike 就 不 错 。 要 记 住 ， 如 果 运 用 了 描述 性 的 alt 
属性 ，Google 图 片 搜索 会 为 你 带 来 巨大 的 访问 量 。 

对 搜索 引擎 来 说 ，HTML 的 斜体 和 粗 体 标签 ( 分 别 为 em 和 strong ) 在 页 面 中 的 权重 要 高 
于 普通 文本 (p 标签 包裹 的 内 容 )。 当 你 使 用 斜体 或 者 粗 体 强调 内 容 的 某 些 文字 时 ， 搜 索引 擎 疏 
虫 会 认为 这 些 文字 非常 重要 ， 并 且 和 页 面 话题 的 重点 有 关 ， 所 以 稍微 尝试 去 按照 人 们 已 有 的 阅 
读经 验 去 安排 斜体 和 粗 体 标签 ， 可 能 会 有 不 错 的 效果 


6. 链接 页 面 的 权重 

在 Google 中 的 排名 高 低 最 终 取决 于 页 面 或 者 网 站 的 内 容 在 相关 关键 字 方 面 的 权重 。 权 重 这 
个 概念 通常 也 适用 于 判定 网 站 的 权威 性 。Google 使 用 一 种 被 称 为 PageRank ( 网 页 排名 ) 的 算法 
来 估算 给 定 页 面 的 权重 ， 给 出 从 1 到 10 的 分 值 。 想 了 解 网 站 的 网 页 排名 ， 并 不 需要 关心 网 页 排 
名 背后 的 复杂 算法 ，Google 提供 了 一 个 叫做 Google 工具 栏 的 Firefox 插件 ( 见 图 4-19 )， 上 面 显 
示 了 当前 页 面 的 网 页 排名 预测 值 。 通 常 认为 数值 7 就 是 非常 高 了 。NYTcom 的 网 页 排名 值 为 9。 
Kadavy.net 首页 是 4， 对 于 个 人 博客 来 说 ， 这 个 成 绩 已 经 相当 不 错 了 。 


4-19 

Google 的 Firefox 工 
有 具 栏 中 会 显示 给 定 页 
面 的 PageRank 值 


页 面 的 PageRank 值 有 若干 个 决定 因素 。 尽管 其 实际 算法 是 保密 的 ， 而 且 在 不 断 演变 ， 但 普 
遍 认为 该 算法 与 下 面 几 个 因素 密切 相关 : 

口 域名 年 龄 ( 域名 注册 的 时 长 ) ; 

口 链 接 到 当前 页 面 的 外 部 页 面 的 权重 (或 PageRank 值 ) ; 
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口 域名 到 期 日 期 ( 域名 即将 到 期 ， 还 是 所 有 者 已 经 提前 续费 了 几 年 ? 这 项 技术 是 Google 申 
请 的 专利 之 一 )。 


7. 链接 页 面 以 及 锚 文本 的 内 容 

简单 来 讲 ， 当 有 关 某 个 话题 的 许多 外 部 页 面 都 链接 至 你 网 站 中 的 相关 页 面 时 ， 搜 索引 擎 通 
常 就 会 提高 你 的 网 站 在 此 话题 上 的 排名 。 如 果 关 联 到 你 的 页 面 的 某 个 外 部 页 面 的 PageRank 值 非 
常 高 ，Google 也 会 因此 提高 你 的 排名 。 

而 且 外 部 链接 的 锚 文本 ( a 标签 之 中 的 内 容 ) 也 非常 重要 。 当 搜索 “bike shop in Chicago" 时 ， 
写 着 “Bike Shop in Chicago” 的 锚 文本 要 比 写 着 “David's Bike Shop” 的 锚 文 本 对 网 店 “David's 
Bike Shop” 的 搜索 排名 影响 更 大 。 

锁定 义 a 标签 也 包含 一 些 可 以 放置 描述 性 文字 的 属性 ， 比 如 title 属性 。 到 目前 为 止 我 还 
没有 发 现 使 用 title 属性 会 对 SEO 产生 什么 好 处 ,但 它 肯定 不 会 带 来 坏处 。rel 属性 有 一 个 值 
为 nofollow， 用 来 告诉 Google 疏 虫 不 要 追踪 这 个 链接 ， 进 而 不 要 基于 这 个 链接 给 予 目标 页 面 
任何 额外 的 排名 权重 。 大 多 数 博客 会 对 评论 中 的 所 有 链接 加 入 rel="nofollow" 属性 ， 以 防止 
带 有 SEO 意识 的 垃圾 消息 群发 者 利用 评论 功能 获得 额外 排名 权重 。 


8. 万 事 过 犹 不 及 

不 过 ， 如 果 你 照 本 宣 科 地 接受 了 上 面 的 知识 ， 那 么 页 面 上 可 能 就 会 充斥 着 各 种 毫 无 意义 的 
关键 字 。 也 许 你 会 到 处 联系 网 站 管理 员 , 购买 链接 , 然后 在 自己 页 面 中 充斥 着 ( 写 满 了 关键 字 的 ) 
外 部 链接 。 甚 至 有 可 能 通过 设置 与 背景 色 一 致 的 颜色 来 掩盖 这 些 链接 ,或 者 干脆 用 CSS 设置 隐藏。 

使 用 一 些 这 种 偏激 的 手法 也 许 会 对 你 网 站 的 排名 有 一 点 点 帮助 ， 但 任何 更 极端 的 做 法 都 会 
使 Google 非常 不 满 。 据 说 Google 有 一 套 非常 复杂 的 策略 ,来 检测 出 这 些 手法 并 对 这 些 网 站 降 
级 处 理 一 一 这 绝 不 是 你 想 看 到 的 结果 ( 想 想 瞬间 你 就 丢失 了 大 量 的 生意 )。 获 得 外 部 链接 的 不 正 
当 手 法 有 很 多 很 多 。 一 般 来 说 ， 如 果 某 种 做 法 让 人 感觉 是 为 了 骗取 高 排名 ，Google 很 可 能 就 会 
用 一 些 方法 去 检测 它 ， 并 做 出 惩罚 。 


9. 获取 内 容 及 链接 
让 网 站 中 充满 相关 的 关键 字 , 或 者 被 带 有 相关 关键 字 的 网 站 链接 关联 , 都 是 达到 目标 的 手段 ， 
但 却 不 是 目标 本 身 。 借 助 良好 的 编程 实践 ， 并 且 创作 出 其 他 网 站 想 要 主动 链接 的 有 用 的 、 引 人 
入 胜 的 内 容 ， 也 可 以 达到 预期 目的 。 
下 面 为 网 站 获得 内 容 和 链接 关联 ， 提 供 了 一 些 不 会 引起 Google 反对 的 合法 方式 。 
口 拥有 一 个 博客 。 要 想 在 关键 字 搜 索 中 获得 高 排名 ， 那 么 有 用 的 内 容 、 丰 富 的 目标 关键 字 ， 
还 有 定期 更 新 几乎 是 必 不 可 少 的 条 件 。 拥 有 一 个 博客 是 具备 这 些 条 件 的 最 佳 方式 。 不 过 ， 
Google 还 是 会 把 一 些 非常 糟糕 的 内 容 排 得 非常 靠 前 ， 所 以 我 要 说 ， 写 一 些 文笔 一 般 的 内 
容 要 比 什么 都 不 写 强 很 多 。 不 过 ， 也 许 当 Google 改进 搜索 引擎 ， 或 者 其 他 人 设计 出 更 好 
的 搜索 引擎 时 ， 这 一 切 会 有 所 改变 。 
口 收录 到 目录 网 站 。 DMOZ 是 最 具 权 威 的 目录 网 站 ， 而 且 是 免费 的 一 一 但 想 被 它 收 录 几 
乎 是 不 可 能 的 。 此 外 还 有 很 多 付费 的 目录 网 站 ,但 我 只 知道 Yahoo! 目录 和 Business.com 
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具有 很 高 的 权威 性 。 小 心 其 他 的 目录 网 站 ,或 者 向 专业 人 士 请 教 ， 即 便 这 样 ， 也 要 一 直 
保持 警惕 。 

口 在 其 他 网 站 上 留言 。 找 到 某 个 受众 群体 经 常 浏览 的 权威 网 站 ,然后 给 网 站 作者 留言 。 于 是 ， 
他 们 的 网 站 会 得 到 优秀 的 内 容 ， 你 的 网 站 会 得 到 链接 关联 ， 而 且 受 到 网 站 访问 者 的 关注 。 

口 撰写 链接 诱饵 。 获 得 大 量 链 接 的 最 佳 方式 就 是 撰写 别人 会 链接 、 分 享 和 讨论 的 内 容 。 编 
写 步 又 周全 、 信 息 丰 富 的 入 门 知 识 就 是 很 好 的 例子 ,但 ( 不 幸 的 是 ) 撰写 具有 争议 性 
话题 的 帖子 效果 也 不 错 。 这 类 帖子 会 被 分 享 到 像 Reddit 这 样 的 社会 新 闻 网 站 ， 以 及 
Facebook 和 Twitter 上 面 。 做 大 量 的 研究 调查 ， 并 绘制 一 些 漂亮 的 图 表 ， 那 么 获得 链接 的 
机 会 将 再 次 大 大 增加 。 

口 找到 受众 。 在 完成 了 非常 优秀 、 有 用 而 且 有 趣 的 内 容 之 后 ， 要 尽 可 能 地 让 更 多 的 目标 受 
众 看 到 它 。 将 它 提交 给 目标 受众 经 常 浏览 的 社会 新 闻 站 点 ， 或 者 在 SumbleUpon ( 只 需 
为 每 次 访问 支付 非常 少 的 费用 ， 还 有 机 会 得 到 无 限 次 的 免费 流量 ) 的 目标 分 类 中 购买 流 
量 。 还 有 一 个 很 好 的 策略 一 一 找到 相关 话题 最 流行 的 帖子 ， 以 及 为 这 个 帖子 提供 链接 关 
联 的 其 他 网 站 ， 然 后 向 这 些 网 站 忽 售 你 的 帖子 。 


注意 可 能 有 一 些 非常 著名 的 SEO 公司 ， 运 用 起 这 些 技法 来 简直 游刃有余 ( 有 些 技巧 可 能 没 
有 包含 在 上 述 内 容 中 )， 但 要 小 心 ， 因 为 SEO 背后 有 着 太 多 秘密 ， 这 个 行业 充斥 着 很 多 
黑心 的 咨询 顾问 ， 他 们 滥 收 费用 ， 使 用 的 优化 策略 只 能 在 短期 内 提高 你 的 搜索 排名 ， 甚 
至 会 导致 你 的 网 站 被 降级 。 


4.3 小 结 


要 胜任 这 份 文体 设计 的 工作 ， 你 需要 明白 科技 和 文化 因素 是 如 何 来 影响 设计 的 。 此 外 ， 设 
计 的 一 部 分 是 在 传递 信息 ， 所 以 要 明确 你 的 潜在 受众 如 何 获 取 你 要 传递 的 信息 : 
口 如 果 项 目 预算 或 者 目标 允许 ( 参见 第 2 章 )， 要 格外 注意 当前 的 科技 和 文化 对 项 目 产生 的 
影响 ; 
口 避免 简单 地 复制 平面 设计 样式 ， 而 是 去 了 解 其 在 科技 和 文化 方面 的 影响 ; 
口 SEO 是 设计 的 一 部 分 。 设 计时 要 时 刻 牢记 SEO 最 佳 实践 ,使 你 的 设计 避 开 任何 可 能 会 出 
现 的 限制 。 
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第 章 


骗 人 的 黄金 比例 : 认识 比例 


比例 是 事物 看 起 来 美丽 漂亮 的 关键 。 我 们 的 眼睛 似乎 很 自然 地 就 会 被 事物 中 的 某 种 条 理性 
所 吸引 。 以 前 你 可 能 已 经 听 过 有 人 这 样 谈论 比例 :“ 与 脸 上 的 其 他 部 位 比 起 来 ， 他 的 鼻子 不 成 比 
例 ， 显 得 好 不 协调 。” 但 到 底 什么 是 比例 失调 呢 ? 更 重要 的 是 ， 是 什么 使 得 事物 比例 匀称 呢 ? 

虽然 对 比例 的 理解 仁者见仁， 智者 见 智 , 但 历史 上 仍 有 大 量 关于 比例 的 研究 和 思考 。 是 什 
么 使 模特 看 起 来 面容 嫌 好 ? 又 是 什么 赋予 了 雕塑 美丽 优雅 的 外 观 ? 同样 ， 又 是 什么 让 Logo 看 起 
来 漂亮 得 体 ?在 所 有 这 些 问题 的 答案 中 , 完美 的 比例 是 最 容易 被 忽略 , 但 却 至 关 重 要 的 因素 之 一 。 

在 本 章 中 ,我 将 详细 说 明 什么 是 比例 ， 以 及 历史 上 是 如 何 运用 比例 来 美化 事物 的 。 这 是 一 
个 数 千年 来 令 无 数 哲学 家 、 数 学 家 , 当然 还 有 艺术 家 和 设计 师 们 着 迷 的 课题 。 无 论 是 在 自然 界 中， 
还 是 在 古代 社会 遗留 下 来 的 史前 文物 中 ， 人 们 都 可 以 找到 比例 协调 的 例证 。 人 们 对 这 些 布局 结 
构 进行 研究 ， 试 图 破解 美的 公式 。 

虽然 明白 比例 关系 有 助 于 理解 事物 漂亮 的 原因 ， 但 并 不 存在 你 必须 遵守 的 特定 公式 ， 稍 后 
我 会 对 这 一 点 详 加 解释 。 相 反 ， 和 设计 中 的 很 多 东西 一 样 ， 关 于 比例 关系 有 一 些 很 简单 的 设计 
准则 ， 可 以 帮助 你 更 协调 地 完成 漂亮 的 设计 。 

因此 ,设计 成 功 的 作品 并 不 需要 太 纠 结 于 比例 法 则 。 但 是 ， 如 果 它 碰巧 激发 了 你 的 思路 ， 那么 
实践 一 下 也 有 益 无 害 。 尝 试用 不 同 的 几何 比例 来 进行 设计 ， 可 能 会 让 你 着 迷 一 阵子 ， 其 至 是 一 生 。 

通过 本 章 内 容 的 介绍 ， 你 将 会 对 比例 有 个 大 致 的 了 解 ， 而 且 这 也 有 助 于 理解 后 两 章 内 容 。 
第 6 章 介 绍 了 如 何 使 用 一 些 关键 的 设计 原则 创作 出 有 趣 的 作品 ， 第 7 章 则 会 介绍 如 何 运用 这 些 
知识 更 好 地 组 织 信息 。 


5.1 什么 是 比例 


宽泛 地 来 讲 ， 比 例 就 是 指 某 个 物品 自身 的 大 小 或 尺寸 相对 于 其 他 相关 物品 的 表现 效果 。 无 
论 是 物品 本 身 还 是 与 其 他 物品 之 间 ， 都 存在 着 比例 关系 。 
冲印 的 照片 (还 记得 冲印 照片 是 什么 吗 ) 就 是 有 比例 的 。 如 果 是 一 张 宝 丽 来 照片 ， 那 它 的 
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比例 接近 于 正方 形 边 的 尺寸 几乎 相同 (一 
如 果 是 从 35 毫米 胶片 相机 拍摄 冲印 出 来 的 照片 ， 将 是 
厘米 

但 与 此 同时 ， 照 片 中 的 主题 相互 之 间 也 存在 着 一 定 的 比例 关系 。 观 察 图 5-1 中 这 张 鲜花 的 
照片 ， 花 条 彼 间 也 存在 比例 在 现实 世界 中 ,这些 花 的 大 小 可 能 大 致 相同 ， 但 在 这 张 
照片 中 ， 花 条 的 大 小 却 相 远 。 照 片 中 最 突出 的 花 ( 右 下 侧 ) 看 起 来 要 比 其 余 的 花 大 出 很 多 

这 朵 凸显 的 花 自身 也 有 着 比例 每 一 朱 花 辩 都 有 着 大 致 相同 的 尺寸 ， 都 与 花 的 其 
分 构成 一 定 比 例 关 中 间 的 花蕊 与 花 办 ,以 及 与 整 打 花 ， 也 构成 比例 

这 条 花 和 照片 中 的 其 他 花 样 ， 也 存在 着 上 + 自身 的 比例 这 张 照片 在 书页 中 占 
据 了 一 个 固定 的 尺寸 ， 而 这 的 花 只 占用 了 照片 中 一 定 的 面积 。 花 在 照片 中 的 位 置 与 整 张 
照片 的 尺寸 也 有 一 定 的 比例 关 朱 花 位 于 照片 的 右 下 侧 时 ， 与 照片 整体 的 比例 关系 ， 和 把 
花 摆 放 在 照片 中 心 时 的 比例 关 不 同 

在 图 5-2 中 , 花 的 照片 了 裁剪 。 现 在 ,这 张 照片 的 比例 不 再 是 长 方形 ,而 是 完美 的 正方 形 
原来 位 于 照片 右 下 侧 的 花 ， 现 在 正好 处 于 照片 的 中 央 








8.9 厘米 x10.8 厘米 ) 
和 比例， 可 能 会 是 10.2 厘米 x15.2 












































图 5-1 





照片 中 的 花 与 照片 及 
都 存在 
| 花 的 各 
个 组 成 部 分 与 花 本 身 
也 存在 比例 关系 


Parvin 报 (http://www 





flickr.com/people 
55948751(@NO0/ ) 








前 的 花 的 照片 

现在 花 与 照片 的 比例 
y 不 同 了 。 照 
片 尺寸 的 比例 关系 也 


发 生 了 改变 
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看 ,裁剪 对 照片 的 外 观 产生 了 多 大 的 影响 ! 无 论 是 将 照片 中 的 花 采 看 作 实物 ， 还 是 想象 成 
带 颜 色 的 形状 ， 照 片 的 构造 已 经 完全 改变 。 照 片 在 裁剪 之 前 的 构造 ( 指 照片 中 与 主题 、 形 状 、 
颜色 相关 的 整体 布局 ) 与 裁剪 之 后 完全 不 同 。 裁 前 之 前 的 照片 给 人 一 种 纵深 感 ， 你 可 以 很 容易 
地 看 到 背景 中 的 花 。 在 裁剪 后 的 照片 中 ， 突 出 的 花 被 抽 离 了 出 来 ， 看 起 来 就 像 从 照片 的 中 心 绽 
放出 来 的 一 堆 形状 。 


5.2 ”比例 与 设计 


比例 关系 可 以 彻底 改变 一 件 设计 所 带 来 的 感觉 。 不 同 的 比例 关系 ， 可 以 凸显 一 个 事物 的 重 
要 性 ， 而 且 同 时 让 另 一 个 事物 看 起 来 无 关 紧要 。 比 例 关系 有 助 于 协调 组 织 设计 中 所 涉及 的 各 种 
元 素 ， 这 不 仅 能 吸引 观众 的 眼球 ， 还 能 指引 观众 参透 整个 设计 。 不 管 你 是 拍摄 花 的 照片 ， 雕 刻 
大 理 石雕 塑 ， 抑 或 制作 Web 应 用 程序 的 界面 ， 理 解 比例 都 是 至 关 重 要 的 ， 这 不 仅 在 于 它 能 吸引 
观众 的 注意 ， 还 在 于 你 能 够 通过 引导 观众 视线 而 牢 牢 抓 住 他 们 的 眼球 。 

请 观察 图 5-3 中 非常 简单 的 两 幅 作 品 。 左 边 这 幅 的 视觉 效果 非常 一 般 ， 索 然 无 趣 。 但 右边 
这 幅 看 上 去 就 有 趣 多 了 。 当 然 这 是 相 比较 而 言 ， 我 并 不 指望 它 能 被 卢 浮 宫 收藏 。 

但 是 这 两 幅 作 品 有 着 相同 的 形状 、 相 同 的 数量 和 相同 的 颜色 ， 那 么 为 什么 其 中 一 幅 就 比 另 
一 幅 更 具 吸 引力 呢 ? 这 两 幅 作 品 之 间 视 觉 趣味 的 差别 主要 就 在 于 比例 的 变化 。 


图 5-3 

尽管 两 幅 作品 具有 相 
似 的 特征 , 但 因为 它 
们 具有 不 同 的 比例 关 
系 ， 所 以 右边 的 要 比 
左边 的 看 上 去 更 有 趣 





右边 这 副 作 品 中 的 圆 形 大 小 各 异 。 并 且 这 些 大 大 小 小 的 圆 彼此 存在 着 一 个 特定 的 比例 关系 。 
圆 排 列 的 方式 也 经 过 了 精心 的 比例 选择 。 它 们 看 起 来 好 像 是 随意 散落 的 ， 但 其 实 我 仔细 考虑 过 
每 个 圆 在 整个 画布 比例 中 的 位 置 。 

这 两 幅 作 品 的 画布 自身 尺寸 也 有 所 不 同 。 我 有 意 为 右 侧 画 布 挑选 了 更 具 视觉 趣味 性 的 比例 
尺寸 。 

所 有 这 些 无 形 的 考虑 远 比 那些 颜色 或 者 形状 因素 更 微妙 ， 对 提高 设计 的 视觉 吸引 力 和 信息 
传递 清晰 度 大 有 帮助 。 但 是 要 明白 如 何 使 用 比例 ， 你 需要 先 了 解 哪 种 比例 更 具 吸 引力 ， 以 及 如 
何 运用 它们 。 
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5.3” 揭 开 黄金 比例 的 传奇 面纱 


毫 无 疑问 ， 本 章 的 开篇 非常 简单 。 我 已 经 尽 可 能 用 最 简单 的 方式 去 介绍 比例 ， 兴 许 你 一 直 
以 来 都 期 盼 我 讲 讲 黄金 比例 ， 现 在 是 时 候 了 。 

如 果 问 一 个 人 : 世界 上 什么 样 的 比例 是 最 美的 。 倘若 他 真能 说 出 些 什么 的 话 ， 那 么 答案 很 
可 能 就 是 黄金 比例 。 或者， 至 少 他 听 到 的 是 这 样 。 

几 千年 来 ， 黄 金 比 例 令 无 数学 者 、 数 学 家 和 艺术 家 着 迷 。 虽 然 对 于 古 希腊 人 是 否 真正 理解 
黄金 比例 所 潜在 的 美学 特性 ， 人 们 还 存在 争议 , 但 世人 公认 ， 这 个 迷人 的 无 理 数 早 在 公元 前 6 
世纪 就 已 经 被 十 希腊 的 毕 达 哥 拉 斯 发 现 ( 虽然 古 希 腊 数 学 家 欧 几 里 得 在 公元 前 3 世纪 才 在 书 中 
对 其 进行 详细 介绍 )。 

黄金 比例 ( 常 以 小 写 希腊 字母 $ 表示 ) 的 代数 表达 式 如 下 : 


按照 黄金 比例 进行 分 制 的 线段 ， 彼 此 之 间 的 相互 关系 为 :线段 q、 了 的 长 度 之 和 ar， 与 线 
段 a 长 度 的 比值 ， 等 于 线段 a 与 线段 的 长 度 比 ， 如 图 5-4 所 示 。 
图 5-4 
一 条 线段 按照 黄金 比 
例 分 割 成 两 条 线段 
a » 其 中 较 长 的 线段 a 与 
， 。 整 条 线段 的 比例 关 
ob 系 ， 与 较 短 的 线段 b 
与 长 线段 a 的 比例 关 
系 相同 
黄金 比例 矩形 ( 据 信 存在 于 自然 界 .艺术 品 和 建筑 中 ) 是 以 一 个 正方 形 一 条 边 的 中 点 为 圆心 ， 
以 该 中 点 到 其 对 角 的 线段 长 度 为 半径 画 弧 ， 根 据 这 条 弧 线 所 能 达到 最 远 的 点 ， 来 定义 矩形 长 边 


的 长 度 ， 如 图 5-5 所 示 。 

图 5-5 
黄金 比例 矩形 ， 其 
两 条 边 之 比 接近 

1 1: 1618， 是 以 正方 
形 一 条 边 的 中 点 到 对 
角 的 长 度 为 半径 画 弧 
构建 的 


90= 1.618 
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原 正方 形 外 侧 的 小 矩形 ， 也 有 着 和 整个 大 矩形 一 样 的 比例 ( 约 为 1 : 1.618， 即 61.8% )。 如 
图 5-6 所 示 ， 画 一 条 线 将 刚才 的 小 矩形 细 分 成 一 个 正方 形 ， 这 样 就 又 产生 了 一 个 具有 相同 比例 
的 矩形 。 以 此 类 推 ， 这 种 划分 可 以 一 直 继续 下 去 ， 这 就 是 这 个 比例 迷人 的 地 方 。 


图 5-6 

通过 画 正方 形 的 方式 
可 以 无 限 地 划分 黄金 
比例 矩形 


5.3.1 黄金 比例 与 斐 波 那 契 数 列 ， 类 似 却 不 相同 


黄金 比例 与 斐 波 那 契 数列 密切 相关 。 斐 波 那 契 数列 是 一 系列 的 整数 ， 其 中 ( 从 第 3 项 开始 ) 
每 一 项 都 等 于 前 两 项 之 和 ， 就 像 这 样 : 0、1、1、2、3、5、8、13、21、34、55、…。 在 靠 前 的 
序列 项 中 ， 用 前 一 项 除 以 后 一 项 得 到 的 百分比 ， 多 少 有 些 接近 黄金 比例 (2*+3 = 66% )， 而 在 后 
续 的 序列 项 中 ， 这 个 比例 就 几乎 和 黄金 比例 完全 一 样 了 (34=55= 61.8% )。 

斐 波 那 契 数列 生成 的 对 数 螺 线 几 乎 和 黄金 比例 生成 的 完全 一 致 。 如 图 5-7 所 示 的 螺 线 ， 是 
在 斐 波 那 契 数列 矩形 中 ， 以 每 个 正方 形 的 对 角 绘 制 弧 线形 成 的 。 螺 线 中 每 个 90° 的 弧 长 ， 约 是 
前 一 个 的 61.8% 。 

在 自然 界 中 可 以 看 到 很 多 类 似 的 对 数 螺 线 ， 像 蜗牛 壳 、 星 系 旋 臂 、 热 带 气旋 的 雷达 图 像 等 。 
然而 ， 正 如 我 稍 后 会 详细 论述 的 ， 这 些 螺 线 并 非 都 是 按照 黄金 比例 构建 的 


图 5-7 

斐 波 那 契 数列 生成 的 
螺 线 与 黄金 比例 生成 
的 螺 线 几乎 一 模 一 
样 ， 由 一 系列 的 四 分 
之 一 圆 弧 组 成 ， 并 且 
每 一 个 四 分 之 一 圆 弧 
的 长 度 大 约 都 以 前 一 
个 长 度 的 61.8% 递 碱 





虽然 黄金 比例 和 斐 波 那 契 数列 在 理论 上 确实 不 同 ， 但 它们 最 终 产生 的 比例 大 致 相同 。 所 以 ， 
如 果 你 只 是 单纯 地 探讨 如 何 利用 几何 引导 审美 决策 ( 而 不 是 做 严谨 学 术 , 就 像 我 接 下 来 要 做 的 )， 
那么 可 以 放心 地 将 两 者 混淆 使 用 。 我 下 面 将 它们 简单 地 统称 为 黄金 比例 。 
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5.3.2 人体 中 的 黄金 比例 


在 创作 中 运用 黄金 比例 的 一 个 比较 著名 的 例子 就 是 《维特 鲁 威 人 》( The VFimwius Man， 见 图 
5-8 )。 维 特 鲁 威 在 其 著作 中 宣扬 建筑 比例 应 该 基于 人 体 比例 的 设计 理念 ， 在 其 工作 的 基础 上 ， 
列 奥 纳 多 达 芬 奇 创作 了 这 幅 名 画 。 


5-8 

达 芬 奇 的 《维特 鲁 威 
人 》 按照 黄金 比例 
和 矩形 划分 人 体 部 位 





维特 鲁 威 人 的 比例 与 黄金 比例 之 间 的 关系 ， 以 及 维特 鲁 威 人 各 部 位 之 间 的 相互 关系 ,着 实 
令 人 印象 深刻 。 图 5-8 可 以 看 到 ， 第 一 个 黄金 比例 矩形 ， 其 长 度 等 于 手臂 展开 的 长 度 ( 而 且 模 
特 的 身高 与 臂 展 相同 )， 高 度 与 肚脐 完美 一 致 。 第 二 个 黄金 比例 矩形 则 是 纵向 的 ， 其 长 边 与 模特 
右 侧 肩膀 竖 直 对 齐 。 用 和 左 侧 肩膀 竖 直 齐 平 的 正方 形 将 这 个 黄金 比例 矩形 切 分 开 来 ， 再 将 正方 
形 之 外 的 矩形 用 和 肩膀 高 度 齐 平 的 正方 形 切 分 开 来 ， 剩 余 的 部 分 正好 框 起 头 部 。 

维特 鲁 威 的 著作 和 达 芬 奇 的 画作 ， 时 至 今日 仍 被 建筑 师 和 设计 师 所 追捧 ， 而 且 激发 了 大 量 
的 理性 化 几何 风格 的 设计 、 艺 术 和 建筑 -虽然 这 其 中 产生 了 一 些 让 人 印象 深刻 的 作品 ， 但 只 有 
当 不 再 刻意 强调 这 些 几 何 关系 时 ， 才 有 可 能 出 现 更 好 的 作品 。 
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建筑 师 Le Corbusier 基于 达 芬 奇 的 《维特 鲁 威 人 》， 设 计 了 一 种 称 为 Modulor 的 整套 建筑 标 








准 ， 并 运用 在 了 一 些 建 筑 之 中 ， 比 如 法 国 布 里 埃 的 Unité d "Habitation 居民 住宅 ( 见 图 5-9 )。 相 
机 的 视差 可 能 会 对 照片 造成 坚 度 的 失真 ， 但 仍 可 以 看 出 整个 建筑 的 正面 图 几乎 是 由 一 大 一 





小 ,两 个 并 列 
金 比例 矩形 上 





放 的 黄金 比例 矩形 组 成 的 。 独 立 单元 的 边界 ， 以 及 阳台 的 开口 也 完全 受到 了 黄 
响 





图 5-9 
Le Corbusier 的 建筑 风 











如 果 你 无 法 从 这 座 建筑 中 找到 美感 ， 也 无 可 非议 。 因 为 这 座 建筑 遵循 了 -种 功能 结构 暴露 
的 建筑 理念 ， 也 被 称 为 “野性 主 些 诸如 此 类 ， 外 观 没 有 太 大 吸引 力 的 现代 建筑 










理念 的 产物 ， 同 样 也 是 遵循 追求 极致 几何 美学 理念 的 产物 
新 近 遵 循 黄金 比例 的 设计 实例 ,来 自 于 Twitter 设计 者 发 布 的 一 条 
图 5-10 所 示 。 从 这 张 图 片 中 可 以 看 出 ， 这 次 值得 关注 的 重新 设计 显 








有 图 片 链接 的 入 
到 了 黄金 比例 的 区 






图 5-10 bwitter: 
按照 Twitter 创意 总 
监 的 说 法 ， 新 版 网 站 
的 设计 灵感 来 自 于 黄 
金 比例 


ds one of the main 
图 片 复制 已 获 Twitter arrojas 
公司 许可 ss eh Kemberdl@ston @design 





winer "good 


od rote re een om 
OO 





第 5 章 骗 人 的 黄金 比例 : 认识 比例 


5.3.3 ”黄金 比例 的 误 
从 黄金 比例 在 众多 著名 建筑 和 设计 中 的 应 用 可 以 看 出 ， 人 们 的 确 还 在 为 它 而 着 迷 。 但 是 关 





冈 






平 此 例 也 存在 着 一 些 误区 ， 这 主要 体现 在 : 黄金 比例 被 当 作 无 与 伦比 的 、 美 丽 的 神奇 比例 ， 
几乎 出 现在 我 们 生活 的 方方面面 。 但 是 ， 许 多 关于 黄金 比例 的 主张 是 毫 无 根据 ， 甚 至 是 完全 不 





真实 的 


1. 古 希 腊 的 黄金 比例 

由 于 黄金 比例 是 由 古 希 腊 数 学 家 提出 来 的 ， 因 此 很 多 历史 学 家 一 直 试 图 在 古 希腊 建筑 与 艺 
术 中 找到 黄金 比例 的 影子 。 帕 特 农 神 庙 正好 是 符合 条 件 的 古 建筑 之 一 。 据 说 帕 特 农 神 庙 是 基于 
黄金 比例 建造 的 [、 立 柱 ， 甚 至 是 建筑 中 的 雕塑 ， 都 是 按照 黄金 比例 设计 的 

但 对 帕 特 农 神 庙 进行 实际 测量 后 的 数据 却 并 不 支持 这 一 理 i 金 比 例 是 由 古 希 腊 
学 家 欧 几 里 得 描述 出 来 的 ， 但 这 只 是 因为 他 对 这 个 有 理 数 本 几何 形状 中 的 表现 感 
兴趣 。 关 于 和 希腊 人 有 意 将 黄金 比例 应 用 在 他 们 的 设计 当中 的 论调 ， 并 没有 任何 证 据 支持 

正如 你 在 图 5-11 中 所 看 到 的 ， 从 帕 特 农 神 庙 的 平面 图 中 ， 看 不 出 任何 刻意 使 用 黄金 比例 的 





























图 5-11 

试图 在 帕 特 农 神 庙 的 
平面 图 中 寻找 黄金 比 
的 影响 ， 但 没什么 
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2. 美术 作品 中 的 黄金 比例 

有 些 学 者 甚至 人 
对 黄金 比例 的 
响 的 因素 ， 似 乎 也 合乎 情理 
头 部 位 于 一 个 可 再 分 害 全 矩形 中 ， 
但 奇怪 的 是 ， 如 果 这 些 都 是 画家 有 意 为 


实际 上 ， 画 布 的 比例 约 为 2 


名 











金 比 例 的 踪迹 
些 明 






显 受 
显 受 





3 





确实 显示 出 人 物 的 
比例 矩形 的 划 平 齐 
画布 本 身 调 整 为 黄金 比例 呢 















得 娜 丽 藻 
品 的 画布 比 从 
比例 不 同 ， 
可 以 找到 一 些 





3. 自然 界 中 的 黄金 比例 
关于 自然 界 中 的 黄 全 





据说 它 是 


是 否 有 人 验证 过 这 种 








说 法 ,还 是 有 人 为 了 

鹦 鸥 螺 外 过 上 的 对 数 螺 线 的 
这 在 图 5-13 中 一 目 了 然 8 条 黄 全 线 。 也 许 每 个 鹦 弄 螺 
壳 都 有 所 不 同 ， 但 要 找到 











5-1 
巾 螺 过 的 螺 线 眼 黄 
金 比例 螺 线 相差 甚 远 
图 片 来 自 Chris 73 
WikimediaCommons 
http://commons 
wikimedia.org/wiki 


UserChris 73 ) 





4. 心理 学 中 的 黄金 比例 

通过 一 些 美学 公式 证 明黄 金 比 美 比例 的 
世纪 60 年 代 所 进行 的 研究 。 他 仅仅 展示 了 10 种 不 同比 
择 了 比例 为 0.57、0.62 ( 黄金 比 人 
的 比 俩 结论 。 从 测试 结果 来 
也 有 很 武者 并 未 

自 Fechner 先生 
果 各 式 各 样 ， 都 设 有 折 





分 主张 ， 都 是 基于 Gustav Fechner 在 19 
| 的 矩形 ， 而 这 其 中 有 90% 的 测试 者 选 
中 形 ， 然 后 刘 赏心悦目 
] 是 最 有 吸引 力 的 ， 但 














得 出 了 黄金 比例 是 最 令 


些 比 












中 形 拥有 最 完美 的 比例 ， 人 们 进行 了 很 多 和 
优 于 其 他 所 有 的 比例 





例 能 处 
5.4 ”其 他 一 些 赏 心 悦 目 的 比例 
就 本 质 而 言 ， 完 美的 比例 是 相生 


关联 的 函数 。 无 需 深入 了 解 西 方 文化 ， 你 冯 
些 比例 有 助 于 你 进行 与 用 户 相关 的 设计 






用 的 比例 。 了 解 这 
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黄金 比例 以 及 马上 将 要 介绍 的 其 他 比例 ， 可 用 来 指导 以 下 方面 的 设计 选 型 : 划分 网 格 中 的 
信息 ( 详 见 第 7 章 )， 创 造 美观 、 整 洁 的 作品 ， 以 及 确定 空白 区 域 和 字体 大 小 - 我 将 会 在 第 6 章 
和 第 7 章 中 更 多 地 讨论 运用 比例 方面 的 内 容 。 


5.4.1 根 号 2 算 形 


具有 2 的 算术 平方 根 比例 的 矩形 ( 以 下 简称 “ 根 号 2 矩形 "， 其 短 边 与 长 边 比例 为 1 : 1.41， 
而 且 有 趣 的 是 ， 连 续 二 等 分 仍然 能 保持 相同 的 长 宽 比 例 。 将 一 个 根 号 2 矩形 平分 之 后 ， 会 得 到 
两 个 根 号 2 矩形 。 再 平分 其 中 一 个 小 矩形 ， 又 得 到 两 个 更 小 的 根 号 2 矩形 ， 以 此 类 推 。 

这 就 是 国际 标准 化 组 织 (ISO ) 使 用 根 号 2 矩形 作为 纸张 尺寸 标准 依据 的 原因 。 采 用 这 种 标 
准 可 以 最 大 程度 减少 浪费 : 因为 标准 中 包含 几 种 不 同 大 小 的 标准 尺寸 ， 并 且 都 可 以 从 一 张 纸 中 
分 割 出 来 。 

如 图 5-14 所 示 ， 以 正方 形 的 平方 根 为 半径 画 弧 ， 就 可 以 得 到 一 个 根 号 2 矩形 。 所 得 的 矩形 
可 以 无 穷尽 地 二 等 分 下 去 。 


图 5-14 

以 一 个 正方 形 的 对 角 
线 为 半径 画 弧 ， 可 以 
得 到 一 个 根 号 2 矩形 


=141- 


5.4.2 2 .3 矩形 


构造 黄金 比例 矩形 或 者 根 号 2 矩形 比较 复杂 。 即 使 你 不 需要 面 对 那 些 复杂 的 几何 公式 ， 也 
很 难 记 住 或 者 计算 它们 的 比例 值 ( 分 别 为 1 : 1.618 和 1 : 1.41 )。 这 就 是 为 什么 一 些 简单 比例 的 
受 欢迎 程度 丝毫 不 逊色 的 充分 理由 之 一 ， 因 为 它们 更 容易 使 用 ， 就 像 2 : 3 。 

2 : 3 比例 的 成 功 与 数字 3 的 关系 密 不 可 分 。 只 要 有 三 个 东西 ， 不管 你 如 何 分 成 两 份 ， 它 们 
的 关系 都 是 2 : 3。 在 写作 中 有 个 “成 三 原则 "， 其 认为 三 个 一 组 的 事物 内 在 更 具 吸 引力 ， 而 且 
通常 也 具 趣味 - 

在 很 多 经 典 的 文学 作品 中 ， 都 能 看 到 “成 三 原则 ”的 影子 ， 比 如 《三 个 臭 皮革 》 和 《金发 
姑娘 和 三 只 能 》 如 果 以 正方 形 、 黄 金 比例 矩形 和 根 号 2 矩形 一 起 去 酒吧 消 遗 来 编排 一 些 笑话 
汐 怕 要 比 只 有 黄金 比例 矩形 和 根 号 2 矩形 来 得 更 有 趣 、 更 好 玩 一 些 。 

在 艺术 和 设计 中 ,“ 三 分 构图 法 ”表明 , 在 视觉 上 可 以 三 等 分 的 作品 会 更 加 赏心悦目 。 比 如 ， 
注意 看 在 本 章 开始 部 分 提 到 的 照片 中 最 大 的 那 打 花 ( 见 图 5-1 )， 就 位 于 照片 的 右 下 角 三 分 之 
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一 址 = 

2 : 3 比例 有 时 可 以 代替 黄金 比例 ， 来 体现 黄金 比例 所 谓 内 在 的 、 无 瑕 的 美 。 当 然 ， 这 两 种 
比例 非常 相似 ( 0.618 和 0.66 ), 但 2 : 3 使 用 起 来 更 容易 ， 因 为 它 算 起 来 相对 比较 简单 。 比 如 ， 
计算 9 的 三 分 之 二 总 比 计算 0.618 x 9 要 容易 得 多 。 


5.4.3 3;4 和 矩形 


3 : 4 矩形 是 另 一 种 简单 易 用 ， 又 极 具 吸 引力 的 比例 。 这 里 我 要 多 说 一 点 ， 在 艺术 、 音 乐 、 
舞蹈 甚至 自然 界 中 都 能 找到 3 : 4 比例 。 它 还 有 另外 一 个 好 处 : 容易 被 整除 为 多 种 比例 组 合 ， 这 
样 在 构建 网 格 时 使 用 起 来 就 更 容易 、 更 灵活 ( 见 第 6 章 ) 

视觉 艺术 研究 表明 ,3 : 4 是 一 种 美丽 的 比例 。1999 年 ，Agatha Olariu 对 历史 上 著名 艺术 家 
的 565 幅 作 品 进行 了 调查 ,结果 表明 这 些 作品 画布 两 条 边 的 比例 平均 值 为 1 : 1.34 ( 约 等 于 0.75 
即 3 : 4)。 由 于 被 调查 作品 的 作者 均 是 载 人 史册 的 艺术 名 人 ， 因 此 我 们 完全 可 以 认为 ， 他 们 所 
使 用 的 画布 也 具有 迷人 的 比例 。 

与 2: 3 逢 形 一 样 ,3 : 4 矩形 有 时 也 被 认为 是 黄金 比例 。 但 与 2 : 3 矩形 不 同 ,3 : 4 和 矩形 ( 0.75 ) 
与 黄金 比例 的 值 差 得 更 多 。 由 于 3 : 4 比例 的 应 用 范围 太 过 广泛 ， 可 能 也 就 成 了 最 不 受 重视 的 比 
例 了 。 


5.5 世界 中 的 比例 


除了 前 面 提 到 的 比例 矩形 ， 在 整个 西方 文化 ， 乃 至 自然 界 中 还 发 现 了 很 多 其 他 常见 的 比例 
关系 。 音 乐 、 文 学 作品 、 有 舞蹈、 纸张 、 移 动 设备 和 计算 机 的 显示 屏 …… 所 有 这 些 事物 都 表明 ， 
一 些 比 例 确实 比 其 他 比例 更 加 赏心悦目 。 

这 些 比例 关系 并 不 总 是 刻意 而 为 的 ,但 理解 和 欣赏 它们 有 助 于 让 你 在 设计 中 获得 更 好 的 
直觉 。 


5.5.1 音乐 和 舞蹈 


虽然 围绕 一 些 类 似 黄金 比例 的 无 理 数 进行 了 诸多 实验 ,但 大 多 数 流行 音乐 的 模式 往往 都 非 
常 简单 。 大 部 分 摇滚 歌曲 都 是 4/4 拍 ， 也 就 是 每 小 节 有 4 拍 。 也 有 3/4 拍 的 流行 音乐 ， 即 每 小 节 
有 3 拍 ， 华尔兹 舞曲 就 是 3/4 拍 的 典型 代表 - 

音乐 中 关于 比例 的 极 好 的 例子 ， 就 是 它 对 音调 的 影响 ， 如 图 5-15 所 示 。 随 便 弹 一 下 吉它 的 
空 弦 ( C 调 ), 会 听 到 一 个 C 调 音符 。 如 果 按 压 在 匡 弦 的 二 分 之 一 处 弹 弦 , 会 听 到 另 一 个 C 调 音符 ， 
但 这 次 高 出 八 度 ( 大 调 音阶 中 的 八 分 音符 )。 如 果 按 压 在 琴 弦 的 四 分 之 三 处 再 来 弹 同一 根 弦 ， 会 
听 到 一 个 F 调 音符 ( 大 调 音阶 中 的 四 分 音符 或 下 属 音符 )。 如 果 按 压 在 三 分 之 二 处 ， 会 听 到 一 个 
G 调 音符 ( 大 调 音阶 中 的 五 分 音符 或 属 音 )。 
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图 5-15 cf F(V) G(V) CM 
通过 按压 吉他 琴 弦 的 四 分 之 三 处 或 三 分 

之 二 处 ， 就 可 以 分 别 弹出 大 调 音节 中 的 075066 05 
下 属 音符 和 属 音符 


由 C、F 和 G 这 些 根 音 形成 的 和 弦 里 面 ， 有 一 个 常见 的 蓝调 和 豆 进 行 ， 而 在 播 滚 乐 和 流行 音 
乐 中 最 常见 的 和 弦 进 行 被 称 为 “LIV-V”( 罗马 数字 的 1、4 和 5)。 以 D 大 调 音节 (D、G、A ) 弹 
奏 这 个 和 弦 进 行 ， 就 是 披 头 十 乐队 的 歌曲 Tiwist and Shout 中 的 和 弦 进 行 。 

舞蹈 是 音乐 的 肢体 表现 。 萨 尔 萨 舞 主要 由 3/4 节拍 组 成 。 如 图 5-16 ( 上 半 图 ) 所 示 , 在 前 3 
拍 中 ,领舞 人 先 向 前 一 步 再 后 撤 一 步 ， 然后 在 第 4 拍 停顿 一 下 。 然 后 领舞 人 重复 这 个 过 程 ， 不 
过 这 次 是 先 向 后 撤 步 。 第 4 拍 上 的 停顿 给 人 一 种 精彩 的 转身 和 旋转 的 惯性 感 。 

巴 恰 它 是 男 一 种 形式 的 拉丁 舞 。 它 起 源 于 多 米 尼 加 共和 国 ， 打 破 了 3/4 节拍 的 限制 。 领 舞 
人 侧 向 移动 3 个 节拍 ， 在 第 4 个 节拍 轻 点 右 脚 ， 然 后 换 另 一 个 方向 重复 这 个 过 程 ( 见 图 5-16， 
下 半 图 )。 


图 5-16 0 1 

拉丁 舞 中 的 萨 尔 萨 舞 。 oo 2 

(上 图 ) 和 巴 夫 它 生 。 Bd 

(下 图 ) 在 时 CD BD eB ep 
方向 之 前 ， 都 包含 三 
个 节拍 的 动作 ， 以 及 跨 步 停 步 
一 个 节拍 的 停顿 








5.5.2 自然界 


所 谓 符合 黄金 比例 的 网 鸥 螺 壳 ， 其 实 是 一 个 非常 有 说 服 力 的 3 : 4 比例 的 例子 。 如 图 5-17 
所 示 ， 基于 3 : 4 比例 绘制 一 条 对 数 螺 线 ( 即 螺 线 每 条 直角 曲线 都 是 圆周 的 一 部 分 ， 该 圆周 的 半 
径 是 前 一 个 圆周 曲线 半径 的 四 分 之 三 ) 会 发 现 它 与 这 个 鹦 吏 螺 壳 螺 线 的 吻合 度 非常 高 。 

这 并 不 是 说 黄金 比例 在 自然 界 中 完全 不 存在 。 如 在 本 章 前 面 小 节 中 提 到 的 ， 黄 金 比 例 与 人 
体 的 比例 有 着 一 些 奇妙 的 联系 。 各 种 鱼 的 比例 中 也 存在 着 黄金 比例 。 在 图 5-18 中 , 我 依据 黄金 
比例 对 小 丑 鱼 进行 了 分 割 。 鱼 的 身体 与 两 个 并 排 横 放 的 黄金 比例 矩形 完美 匹配 ， 这 两 个 矩形 的 
交界 线 正 好 位 于 小 丑 鱼 的 第 二 条 背鳍 起 点 处 。 并且， 这 条 交界 线 也 正好 是 鱼 身 中 部 白色 条 纹 的 
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使 用 正方 形 对 这 两 个 黄金 比 矩 
+ 齐 。 对 和 胸鳍 对 齐 的 矩形 再 进 一 





进一步 分 割 ， 得 到 的 分 割 线 正 好 与 肪 
分 , 分割 线 正好 与 鱼 的 眼睛 





-条 背鳍 






将 对 数 螺 旋 以 0.75 为 
系数 衰减 ， 与 鹦 鸥 螺 
壳 的 剖面 图 非常 吻合 
图 片 来 自 Chris 73/Wiki- 
mediaCommons (http: 





//commons.wikimedia. 


org/wiki/User:Chris 73 ) 





小 丑 鱼 与 黄金 比例 有 
着 很 有 趣 的 比例 关系 
图 片 来 自 Fir0002 
staffotos ( http/en-wik- 





ipedia.org/wiki/User 
Fir0002 ) , 基于 以 下 
许 可 http://commons, 
wikimedia.org/wiki 
Commons:GNU_Free 
Documentation License_ 


12 








9 比例 









图 5-19 中 可 以 看 出 ， 鱼 的 身体 与 一 个 
井 行 多 次 分 割 之 后 


带 有 附属 矩形 的 黄金 比例 矩形 相 匹配 。 将 主 黄金 比 
出 现 了 更 具 说 服 力 的 对 齐 线 





例 矩 形 : 后 . 鱼 的 胸鳍 和 眼睛 
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白 胸 刺 尾 鱼 
起 来 似乎 t 
比例 

Ltz Raptor 摄 (http 








commons.wikimedia 
org/wiki/User:Ltz 


Raptor 











不 仅 能 在 自然 界 和 西方 下 中 找到 和 黄金 比 4 生计 的 电子 
产品 中 也 不 例 细 4 你 创作 有 趣 而 F 设计 时 ， 了 让 是 非常 有 用 的 .我 会 在 第 6 
f 和 第 7 章 中 谈论 这 个 话 是 

曾经 一 度 ) 电 脑 屏 768 像素 的 长 宽 比 是 3 : 4 (0.75 )。 苹 果 的 





为 960 像素 宽 比 (0.66 )。 谷 歌 的 Nexus S 手机 和 





iPhone 4 分 状 李 5 
MacBook Pro 都 订 比例 ( 0.618 ) 的 斐 波 那 契 数列 前 面部 分 的 比例 。Nexus S 的 
5 800 像素 x 480 像素 ， 长 宽 上 3 : 5 (0.6 )， 而 MacBook Pro 的 分 辩 率 1280 像素 

为 5 : 8 (0.625 )。 现 代 平板 电视 则 根据 电影 的 比例 ， 采 用 了 最 极端 的 矩形 比 











9 20 
一 HOT le k Pn 
5 :9 =0.56 n 6 4 =075 





最 具 吸 引力 的 比例 往往 介 于 
两 种 比例 之 间 


有 调查 结果 于 


黄金 比例 (0.618) 和 3 : 





而 2 : 3 比例 (0.66 ) 恰巧 处 于 这 
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5.6 设计 中 的 比例 


相信 现在 你 对 各 种 不 同 的 比例 以 及 它们 应 用 的 场景 , 已 经 有 了 良好 的 整体 概念 ， 接 下 来 我 
们 开始 涉及 如 何在 设计 中 运用 比例 的 话题 。 这 一 小 节 只 是 非常 基本 的 概述 一 一 我 将 在 后 续 章 节 
中 深入 探讨 这 个 话题 。 

在 当今 手机 和 电脑 中 普遍 存在 的 比例 ， 与 设计 师 的 工作 尤为 相关 一 一 设计 与 画布 尺寸 比例 
之 间 的 关系 ， 可 以 追溯 到 一 些 最 早 的 书面 写作 样式 。20 世纪 伟大 的 排版 设计 师 Jan Tschichold ， 
分 析 了 数 百 件 早期 的 手稿 和 印刷 书籍 ， 关 于 如 何 为 图 书 创建 合适 的 文本 区 域 和 页 边 距 尺寸 ( 见 
图 5-21 ), 他 给 出 了 如 下 建议 。 

(1) 从 一 个 对 开 页 开始 ,绘制 对 角 线 (A1，A2 )。 

(2) 从 页 面 的 顶部 中 心 点 向 每 个 外 侧 底 角 画 对 角 线 (B1，B2 )。 

(3) 用 和 整个 页 面相 同 的 长 宽 比 画 一 个 框 体 ( Cl ), 并 且 使 B1 与 框 体 的 右上 角 和 左下 角 相 交 ， 
Al 与 框 体 的 左上 角 相 交 。 

如 果 你 正在 使 用 绘图 程序 ， 有 一 个 好 办 法 就 是 ， 先 绘制 一 个 与 单 页 面 大 小 相同 的 框 体 ， 然 
后 再 按 比例 缩放 。 

(4) 一 旦 按照 自己 的 喜好 设置 好 了 页 边 距 ， 在 纸张 的 反面 用 相同 的 方式 设置 页 边 距 。 

现在 ，C1 和 C2 就 是 文字 编辑 区 域 了 。 


图 5-21 
完美 的 图 书页 边 距 ， 
可 以 通过 设置 与 页 面 
本 身 相 同比 例 的 文字 
区 域 来 实现 





以 这 种 方式 创建 书 的 页 边 距 ， 就 完成 了 任何 伟大 设计 的 第 一 步 。 通 过 确立 画布 和 内 容 之 间 
的 几何 关系 ， 有 助 于 将 观众 的 眼球 吸引 到 设计 作品 之 中 。 

现代 应 用 程序 的 设计 往往 更 具 创 新 力 ， 但 尝试 类 似 的 方法 也 未 党 不 可 。 正 如 图 5-22 所 示 ， 
可 以 使 用 这 种 方式 来 确定 iPhone 应 用 程序 的 内 容 区 域 。 这 种 方式 设置 的 页 边 距 要 比 单纯 为 所 有 
边 都 预 留 相同 的 尺寸 更 有 意思 。 你 也 可 以 尝试 音乐 韵律 一 一 在 iPhone 2 : 3 的 屏幕 上 划 定 3 : 4 
的 内 容 区 域 ， 而 且 屏 幕 对 角 线 穿 过 内 容 区 域 项 角 。 这 种 设计 方针 与 前 面谈 到 的 流行 播 滚 乐 的 和 
弦 进 行 相同 : LIV-V。 


82 


图 5-22 

Tschichold 推荐 的 书页 
边 距 设置 方法 也 同样 
适 于 移动 设备 的 屏幕 


还 记得 文章 前 面 提 到 的 那 幅 比较 有 吸引 力 的 作品 吗 ?” 如 果 不 记得 了 ， 看 图 5-23 温习 一 下 。 


图 5-23 


这 幅 简单 的 作品 由 一 
些 特定 选择 的 几何 图 


形 组 成 


黑客 与 设计 : 剖析 设计 之 美的 秘密 
































正如 我 前 面 所 讲 ， 在 设计 这 幅 作品 时 我 做 了 一 些 特定 的 选择 : 
口 作品 画布 的 长 宽 比 是 3 : 4， 即 作品 的 高 是 宽 的 四 分 之 三 。 


第 5 章 骗 人 的 黄金 比例 : 认识 比例 


口 作品 中 圆 形 的 大 小 也 不 是 随意 安排 的 。 作 品 中 最 大 圆 的 直径 与 画布 的 高 度 相等 。 第 二 大 
圆 的 直径 是 最 大 圆 直径 的 四 分 之 一 左右 。 第 三 大 圆 的 直径 又 是 第 二 大 圆 直径 的 四 分 之 三 。 
最 小 圆 的 直径 是 第 三 大 圆 直径 的 四 分 之 三 。 所 以 ， 不 但 画布 满足 3 : 4 的 比例 ， 而 且 各 
个 圆 相互 之 间 的 尺寸 也 符合 3 : 4 的 比例 

口 各 个 圆 的 实际 摆 放 位 置 也 是 由 这 一 比例 决定 的 。 我 将 整个 画布 划分 成 垂直 方向 3 个 单元 、 
水 平方 向 4 个 单元 的 网 格 ( 见 第 7 章 )。 在 图 5-24 中 可 以 看 到 ， 最 大 圆 的 边缘 与 中 间 的 垂 
直 网 格 线 以 及 上 三 分 之 一 水 平 网 格 线 相 切 。 第 二 和 第 三 大 圆 位 于 网 格 线 交叉 点 处 的 中 心 。 


图 5-24 
根据 虚构 的 网 格 线 摆 
放 作品 中 的 贺 形 





你 可 能 会 注意 到 ， 画 布 上 最 小 的 圆 没 有 和 任何 网 格 线 完全 对 齐 ， 尽管 它 确实 接触 到 了 最 左 
边 的 网 格 线 。 我 这 么 做 是 有 特殊 原因 的 ， 我 将 在 第 6 章 讲 构成 和 设计 原则 时 详细 解释 。 


为 什么 MailChimp 的 Logo 如 此 漂亮 ; 从 几何 学 的 角度 剖析 
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黑客 与 设计 : 剖析 设计 之 美的 秘密 


Silverback 设计 过 Logo。 他 们 有 着 非常 好 的 设计 风格 ， 同 时 也 有 人 非常 严格 的 设计 原则 ， 包 括 对 
几何 比例 的 巧妙 运用 


定义 黑 猩 独 尖 部 和 覃 
部 的 团 ， 在 尺寸 上 是 
定 文 黑 猩猩 驱 体 的 圆 
的 0.75 信 -定义 眼 哺 、 
平和 耳 人 的 加 ,在 尺 
才 上 也 同样 是 定义 脸 
类 的 圆 的 0.75 借 

转 载 获 The Rocket 
Science Group 许可 


黑猩猩 的 主体 大 部 分 是 建立 在 一 系列 大 小 俩 次 过 碱 的 固 之 上 . 构 夺 黑猩猩 身体 的 团 是 最 大 的 。 
如 图 所 示 , 定义 黑猩猩 的 头 部 以 及 采 坎 无 毛 的 下 胜地 所 用 图 的 直径 , 均 为 朔 大 图 直径 的 四 分 之 三 。 

累 狸 独 徊 节 部 分 所 用 的 加 和 这 些 精 大 的 圈 之 间 的 比例 关系 更 加 得 落 ， 如 果 不 仔细 观察 ， 你 
可 能 会 认为 ， 用 来 定义 黑猩猩 头 部 的 国 和 用 来 定义 脸 顿 的 国 ， 在 尺寸 大 小 上 出 现 了 枢 大 的 琵 跃 : 
此 外 可 以 很 清 能 地 看 出 定义 黑猩猩 的 归 晴 、 耳 朵 和 手 所 使 用 的 园 ， 是 由 定义 脸 正 的 图 编 减 四 
分 之 三 而 来 的 

那么 黑 狸 锂 脸 类 的 只 十 又 是 如 何 定 义 的 ? 仅仅 是 一 个 随机 选择 吗 ? 达 个 围 的 尺寸 婚 不 是 定 
义 黑 猩猩 关 部 国 的 二 分 之 一 ， 也 不 是 三 分 之 一 ， 更 不 是 四 分 之 三 。 同 入 ,定义 黑猩猩 内 耳 的 加 
和 定义 外 征 的 轿 之 则 也 存在 这 种 问题 

这 是 因为 定义 黑 虱 猩 外 再 的 围 ， 都 是 基于 Robert Bringhurst 在 The Elements of Typographic 
Spye 书 申 提 到 的 多 级 缩 下 【varied scale )。 首先 定 又 最 大 的 国 ， 并 依次 么 以 0.75， 创 造 出 一 系列 
尺寸 递减 的 国 ， 因此, 如 有 果 第 一 图 是 400 迟 素 , 下 一 个 团 将 是 300 像素 (400x0.75 ~300 )， 然 后 ， 
再 下 一 个 是 225 像素 ， 接 着 是 169， 然 后 是 127、95、71、53、 和 4、30、23…… 





黑 独 狂 的 外 形 是 通过 
-系列 0.75 信 多 级 0 
往 放 的 图 来 构成 的 1/ ) 二 
| 
\ 人 ) es 
a 
1Xx0.75 四 1X x075* W075 ~» TXx075* 
更 涅 身体 猩猩 的 腹部 和 头 部 ”猩猩 的 验 电 rt 独 强 的 内 耳 


所 以 ， 黑 猩猩 脸 夫 的 尺寸 就 是 通过 多 级 缩放 来 定义 的 ， 只 不 过 定义 黑猩猩 头 部 的 贺 与 定义 
有 答 类 的 贺 在 尺寸 上 有 了 所 差异 

MailChimp Logo 的 设计 中 还 体现 了 许多 其 他 构成 技术 和 设计 原则 的 有 效 利用 。 我 将 在 第 6 
章 中 讨论 这 些 内 容 。MailChimp Logo 中 对 比例 的 运用 ， 效 果 无 可 和 否认 而 且 令 人 印象 深刻 


第 5 章 骗 人 的 黄金 比例 ; 认识 比例 


5.7 小 结 


无 论 是 故意 还 是 巧合 ， 人 为 抑或 自然 ， 数 学 比例 在 创作 美的 事物 方面 都 功 不 可 没 。 运 用 我 
前 面 所 讲 的 方式 使 用 比例 ， 并 不 是 创造 伟大 设计 的 必要 条 件 ， 但 是 无 论 是 否 要 刻意 而 为 ， 它 往 
往 能 创作 出 伟大 的 设计 。 了 解 比例 在 设计 和 自然 界 中 的 存在 方式 ， 你 就 有 了 理解 ( 我 将 在 第 6 
章 中 讨论 的 ) 构成 和 设计 原则 的 良好 概念 基础 。 
口 下 一 次 再 磁 到 漂亮 事物 的 时 候 ， 仔细 观察 下 它 的 比例 ， 试 着 能 否 找 到 其 中 各 个 元 素 位 置 
安排 和 大 小 搭配 的 模式 。 
口 尝试 拿 起 笔 和 纸 ， 或 是 使 用 你 所 钟爱 的 绘图 软件 ， 设 计 一 幅 像 图 5-3 那样 的 简单 作品 。 
测试 何 种 比例 关系 会 增强 作品 的 吸引 力 。 建议 尝试 黄金 比例 、 根 号 2 比例 、2 : 3 比例 以 
及 3 : 4 比例 来 设计 作品 。 
口 在 选择 字体 尺寸 和 确定 像 图 片 、 图 标 这 种 事物 的 尺寸 时 ， 尝 试 使 用 我 在 介绍 MailChimp 
Logo 时 提 到 的 方法 一 一 多 级 缩放 ( 我 会 在 第 7 章 中 详细 讲解 使 用 方法 )。 
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第 章 


吸引 眼球 : 设计 构图 与 设计 原则 


在 这 个 喧嚣 的 世界 里 ， 充 斥 着 各 种 各 样 吸引 我 们 关注 的 零散 信息 ,设计 作品 能 得 到 用 户 的 
亲 睐 显得 十 分 不 易 。 在 第 1 章 中 我 们 谈 到 ， 有 吸引 力 的 视觉 效果 ， 能 让 设计 所 传递 的 信息 获得 
更 高 重视 以 及 更 多 关注 。 如 果 应 用 程序 界面 看 起 来 比较 有 吸引 力 , 相 比 其 他 视觉 效果 稍 差 但 价格 、 
性 能 方面 都 差不多 的 同类 产品 ， 更 容易 赢得 客户 的 选择 。 在 某 些 情况 下 ， 客 户 愿意 为 界面 杰出 
的 视觉 效果 所 创造 的 额外 感 观 价值 买单 。 

使 用 设计 原则 和 良好 方法 创作 作品 ， 不 仅 是 为 了 让 客户 感到 物 有 所 值 。 明 白 如 何在 设计 构 
图 或 者 界面 中 引导 用 户 的 注意 力 ， 事 实 上 可 以 使 构图 或 者 界面 更 具 条 理性 ， 并 最 终 为 客户 带 来 
更 大 的 价值 。 


6.1 构图 关系 


构图 一 词 指 的 是 : 在 一 件 设计 作品 中 , 诸多 元 素 的 组 织 方式 、 相 互 关 系 ， 以 及 这 些 元 素 与 
画布 或 显示 屏 之 间 的 关系 ( 如 果 适 用 的 话 )。 好 的 设计 构图 能 够 吸引 用 户 的 眼球 并 能 引导 用 户 去 
观看 。 

图 6-1 给 出 了 在 第 5 章 开始 部 分 介绍 的 那 幅 简单 的 作品 。 我 们 普遍 认为 这 幅 作 品 看 起 来 更 
有 趣 些 ， 特 别 是 相对 那 幅 与 它 放 在 一 起 的 枯燥 作品 而 言 。 在 第 5 章 中 ， 我 们 探讨 了 如 何 通 过 精 
心 设计 的 几何 关系 .让 这 幅 简单 的 作品 变 得 有 吸引 力 。 本 章 我 将 介绍 一 些 你 需要 了 解 的 实际 设 
计 原 则 ， 并 在 结尾 部 分 讲解 如 何 运用 这 些 设计 原则 继续 增加 这 幅 作 品 的 趣味 性 。 


6.1.1 阅读 方向 


如 果 你 了 解 用 户 欣赏 设计 作品 的 一 般 方式 ， 就 能 更 好 地 理解 有 效 利 用 设计 原则 何以 会 增加 
设计 构图 的 趣味 。 由 于 一 般 大众 的 阅读 顺序 是 从 左 到 右 、 由 上 至 下 ， 所 以 通常 欣赏 构图 或 者 设 
计 作品 时 ， 无 论 是 雕塑 、 书 、 杂 志 ， 还 是 网 页 ， 都 是 从 左上 角 开 始 的 。 


第 6 章 吸引 眼球 : 设计 构图 与 设计 原则 


图 6-1 

除了 精心 设计 的 几何 
关系 ,善于 运用 设计 
原则 也 能 对 增加 作品 
的 趣味 性 大 有 帮助 





如 图 6-2 所 示 ， 网 页 的 眼 动 跟踪 热点 实 的 有 力 证 明 ， 这 也 与 现代 设计 师 的 工 
作 密 切 相关 。 网 站 访问 者 会 以 “F” 阅 读 模 式 浏览 页 面 一 一 从 左上 角 开 始 ， 横 向 稍微 浏览 一 下 ， 
然后 再 回 到 页 面 左 侧 。 了 解 了 这 种 行为 ， 我 们 也 就 明白 了 设计 构图 要 素 是 如 何 来 引导 和 抓 住 观 
众 眼球 ， 也 能 帮助 你 更 好 地 了 解 用 户 在 关注 哪些 内 容 











图 6-2 

网 站 访问 者 倾向 于 以 
F 阅读 模式 ， 从 左上 
角 开 始 浏览 页 面 
Bruce Clay, Inc.( http:/ 
www.flickr.com/people/ 
bruceclay/ ) 
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以 某 种 特定 的 方 
往 能 恰到好处 地 引导 他 们 的 注意 力 。 有 些 相 


整 件 作品 ， 使 其 视线 在 作品 中 流 ; 





成 功 的 设计 往 


住 观 众 的 视线 ， 引 导 观 











众 欣 赏 





1. 文艺 复兴 时 期 的 雕塑 
件 







掠夺 
党 雕塑 和 浏览 网 页 
方 开 始 着 眼 ， 你 总 会 先 审 视 


目光 形成 一 个 循环 ， 简 直 无 法 离开 这 





博洛尼亚 在 引导 观众 视 
无 论 从 雕 上 角 
疙 地 又 回 到 某 个 构成 元 








未 





作品 


Arnold Paul 摄 








座 雕 塑 构成 的 几 
I 目光 很 可 

卦 蹲 着 的 男子 
站 立 的 男子 的 右 腿 上 
吸 引 着 你 一 遍 又 一 遍地 砍 
其 中 两 个 维度 ， 但 无 论 你 观看 角度 如 


贵 性 






上 角 着 眼 ( 也 就 是 从 女子 的 
a 然后 再 向 下 落 到 站 
接着 视线 又 











部 ， 






1， 


个 位 置 开 始 
文 座 雕 蛆 ， 
刻 被 作品 的 
于 分 所 吸引 


Arnold Paul 摄 








2. 印象 派 画 作 

几乎 在 每 一 幅 完美 作品 中 都 存在 
大 碗 岛 星期 天 的 下 午 》( 见 图 6-5 ) 就 是 一 个 
在 构图 中 存在 着 一 些 很 强大 的 东西 ， 让 





循环 ”效果 。 乔 治 ， 修 拉 创 作 的 
尽管 画 中 的 人 物 和 元 素数 量 繁多 ,但 
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黑客 与 设计 : 


图 6-5 
乔治 


修 拉 的 《 
岛 星期 天 的 下 午 
采用 强烈 的 检 
引导 观众 的 视线 








如 图 6-6 所 示 ， 
线 游 走 
在 作品 中 占据 了 重要 的 位 置 
线 可 能 会 沿 着 占据 了 画 中 其 
角度 的 水 岸 自身 ， 回 到 湖 对 面 的 那 
样 的 细微 构图 部 分 所 吸引 、 


这 两 个 






图 6- 

画作 的 整体 构图 负 
资 引导 观 者 视线 ， 而 
较 小 的 次 构图 部 分 
则 构成 了 一 个 个 视 
党 趣味 点 








如 果 从 画作 的 左上 角 开 始 着 眼 ， 
然后 被 引导 到 画作 右 侧 站 立 的 人 物 身上 







就 像 星期 天 下 午 在 公园 里 悠闲 地 闲 竹 一 样 ， 


剖析 设计 之 美的 秘密 













很 可 能 会 沿 着 湖 对 面 那 条 明显 的 水 平 
独子 的 男子 和 撑 伞 的 女子 ， 这 两 个 人 物 
i 接着 你 的 视 








由 水 边 站 立 的 人 物 或 者 树木 ， 
随 着 视线 在 画 中 “循环 "， 


或 者 成 
东 会 被 画作 中 各 种 各 
发 哉 地 欣赏 着 这 些 细 节 














各 图 与 设计 原则 


3. 网 页 设计 


设计 博客 Think Vitamin( www.thinkvitamin.com ) 的 







合 Web 用 户 的 “F" 阅读 模式 ， 
















并 能 恰当 地 引导 用 户 的 视线 下 如 你 在 图 6-7 中 看 至 发 布 位 置 靠近 主页 的 左上 方 ， 
并 通过 尺寸 设 得 非常 醒目 动 页 面 时 ， 可 以 快速 





章 的 标题 和 图 片 ， 来 寻找 感 兴趣 的 内 容 。 网 站 的 辅助 
都 设置 在 页 面 的 右 侧 ， 览 网 站 主体 内 容 


彤 息 如 网 站 主题 、 订 阅 信息 








Think Vitamin 主页 遵 
循 用户 习 惯 的 “F” 
阅读 模式 ， 将 最 重要 
的 信息 安排 在 了 网 页 
的 左上 角 

图 片 复制 已 获 Carsonified 
许可 





在 很 多 设计 中 ， 尤 其 是 具象 
中 溢出 ， 而 有 些 元 素 又 仿佛 


存 本 着 暗含 的 第 三 维度 。 有 些 元 索 似 乎 要 从 画布 
用 透视 技巧 来 画 的 纵 
质感 和 阴影 这 些 要素 ， 就 可 



















中 。 构 图 前 景 中 
的 事物 
1。 自 然 ， 网 页 中 的 





中 的 人 





就 可 以 将 其 置 于 前 景 或 者 背 例如 ， 在 修 拉 的 岛 星期 天 的 下 午 


物 有 较 多 的 面部 特征 和 服装 细节 ， 而 较 远 的 人 则 没有 


中 , 前 景 


91 


92 





黑客 与 设 






在 我 局 简单 “ 作 


”中 ( 见 图 6-1 ), 






为 成 ， 但 最 大 的 圆 似 


乎 位 于 前 景 中 。 由 于 这 个 圆 非 常 大 ， 特 别 是 它 溢出 了 页 面 ， 给 显得 要 比 其 他 圆 离 你 
更 近 一 些 
1 yy 作 中 











碗 岛 星期 天 的 下 午 》 时 ， 前 景 与 背景 的 关 
,注意 到 作品 右 侧 的 那 对 夫妇 部 分 原 
， 但 同时 也 因为 他 们 处 在 前 最 当中 

为 简便 起 见 ， 我 5 

景 阴影 和 远 处 水 平 线 之 间 的 几乎 所 有 能 看 到 
无 疑问 ， 几 乎 所 有 表现 实物 和 场 
中 景 和 背景 。 作 品 中 这 些 元 素 所 呈现 出 的 纵 
划分 画作 的 场景 ， 有 助 于 在 构图 中 形成 
点 我 会 进一步 讨论 )， 而 这 就 是 吸引 你 


引导 你 的 视线 。 正 如 上 文中 
为 这 对 夫妇 占据 了 画面 很 








你 可 能 注意 到 ， 设 计 构 图 中 还 存在 着 中 景 。 介 于 前 
1 物 。 都 可 以 认为 是 属于 中 景 

是 某 些 抽象 绘画 作品 ， 都 存在 前 景 

吸引 力 ， 使 你 的 视线 无 法 离开 。 如 此 
和 域 ， 或 者 说 使 的 某 些 部 分 更 具 主导 性 ( 对 这 



























2. 在 界面 与 Web 设计 中 

界面 和 Web 设计 中 也 存在 前 景 /背景 关 
的 视觉 暗示 。 如 图 6-8 所 示 ，Mac O' 
口 框 架 的 颜色 梯度 更 加 明显 ， 更 具 触 
以 及 最 小 化 按钮 是 带 颜 色 的 ， 而 未 
作 的 ， 而 非 像 活 动 窗口 上 的 按钮 那样 是 灰色 的 










:。 操 作 系 统 的 界面 中 包含 着 产生 前 景 / 中 景 
X 界面 中 选中 的 窗口 包含 更 清晰 的 界面 元 义 。 窗 
就 好 像 你 真 的 可 以 触摸 到 它 一 样 。 关 闭 、 最 大 化 
骨节 很 不 清晰 。 这 是 为 了 告诉 你 这 些 按钮 是 可 操 










图 6-8 
Mac 


S X 营造 前 景 
关系 ， 以 方便 用 
道 哪些 元 素 是 可 
六 操作 的 
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很 多 Web 设计 都 在 尝试 通过 运用 投影 模仿 这 种 层次 感 ， 比 如 在 主 文本 区 的 边界 区 域 ， 或 者 
在 图 片 周围 加 入 阴影 效果 。 鼠 标 悬 停 状 态 触发 界面 元 素 弹 出 ， 提 示 用 户 可 以 与 这 些 元 素 进一步 
互动 。 当 一 个 按钮 在 视觉 上 弹出 到 前 景 之 中 ， 无 论 是 通过 颜色 演 染 还 是 阴影 效果 实现 ， 其 目的 
就 是 为 了 提醒 用 户 可 以 操作 它 。 

虽然 Think Vitamin 的 设计 主要 运用 纯色 ， 但 仍然 可 以 看 到 一 些 精妙 的 前 景 /背景 关系 运用 。 
最 新 的 以 及 最 突出 的 博文 会 被 推送 到 视觉 前 景 之 中 ， 因 为 它 处 于 如 此 黑暗 的 背景 之 上 。 而 且 博 
文 从 页 面 左 侧 边缘 拉 出 的 效果 ,使 它 几 乎 就 像 被 放置 在 了 主页 面 淡 奶 油 色 背景 的 上 部 

当 你 将 鼠标 悬 停 在 Think Vitamin 的 某 些 设计 元 素 之 上 时 ， 这 些 元 素 会 凸显 出 来 ， 提 示 你 去 
操作 它们 。 如 图 6-9 所 示 ， 鼠 标 悬 停 在 显示 博文 评论 数 的 图 标 上 时 ， 图 标 由 粉色 变 为 红色 ， 进 
人 到 视觉 前 景 之 中 ， 提 示 你 可 以 去 点 击 它 








6.2 设计 原则 


“设计 原则 ”是 指 一 系列 用 于 明确 哪些 设计 特性 可 使 作品 更 具 吸 引力 的 理念 
样 ， 设计 原则 这 个 概念 的 含义 远 比 这 个 词汇 本 身 要 复杂 ， 而 且 世 上 并 没 
的 设计 原则 。 所 以 ， 对 于 设计 原则 ， 其 他 书籍 的 探讨 内 容 可 能 会 与 本 书 完全 不 同 

你 可 能 意 到 ， 在 我 讲述 这 些 原则 时 ， 各 个 原则 之 间 似乎 有 所 重 付 。 也 就 是 说 ,一 条 
设计 原则 往往 与 男 一 条 设计 原则 共生 。 但 这 种 互通 性 是 预料 之 中 的 ， 因 为 优美 的 设计 取决 于 设 
计 元 素 之 间 的 相互 关系 。 设 计 目的 决定 了 设计 要 传达 什么 信息 ， 而 通过 应 用 设计 原则 ， 这 些 信 
息 就 能 够 具有 说 服 力 ， 并 有 效 地 传递 给 用 户 





则 。 和 许多 
套 绝对 标准 













6.2.1 显 性 优势 


显 性 优势 原则 是 通过 将 观众 的 目光 吸引 到 重要 设计 元 素 之 上 ， 在 设计 作品 中 形成 视觉 趣味 
5 素 占 显 性 优势 时 ， 你 就 会 首先 注意 到 它 。 你 刚 开 始 欣 赏 设计 作品 时 ， 它 就 
像 磁 铁 一 样 吸引 着 你 。 而 当 你 欣赏 设计 作品 的 其 他 部 分 时 ， 它 又 像 船 锚 一 样 把 你 拉 回来 。 显 性 
优势 无 时 无 刻 不 在 吸引 着 你 





图 6-9 
博文 评论 数 图 标 在 鼠 
标 悬 停 状 态 下 是 亮 红 
色 ， 仿 佛 图 标 被 推 到 
了 前 景 当 中 ， 提 示 用 


AGAAAE 











a 户 可 以 去 点 

@E 图片 复制 已 获 Carsonified 
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许可 

© 

a 





名 


93 


94 


黑客 与 设计 : 剖析 设计 之 美的 秘密 


当 你 尝试 建立 信息 的 视觉 层次 ( 详 见 第 7 章 ) 时 ， 显 性 优势 就 派 上 用 场 了 。 但 在 我 们 运用 
显 性 优势 元 素 吸引 观众 注意 力 之 前 ， 先 要 搞 清 楚 哪 些 元 素 需 要 占据 显 性 优势 。 

最 暗 的 最 亮 的 ,最 大 的 ,甚至 周边 带 有 大 量 空白 区 域 的 设计 元 素 都 可 以 占据 显 性 优势 . 此外， 
设计 元 素 在 画布 中 所 处 的 位 置 也 会 增加 它 的 显 性 优势 。 

正如 我 前 面 提 到 的 ， 修 拉 画 作 中 右 侧 那 一 对 男女 在 整 幅 作品 中 最 具 显 性 优势 。 基 于 显 性 优 
势 原则 ， 这 两 个 人 物 莫 定 了 整 幅 作品 的 成 功 。 当 你 的 视线 被 吸引 到 这 对 夫妇 身上 之 后 ， 便 激 起 
了 欣赏 画作 其 他 部 分 的 兴趣 。 因 为 这 对 夫妇 在 画 中 诸 元 素 中 具有 显 性 优势 ， 所 以 你 的 视线 不 断 
地 被 拉 回 到 他 们 身上 ， 然 后 再 移 到 画作 的 其 余部 分 之 上 。 

在 我 那 幅 简 单 的 作品 中 ， 最 大 的 贺 具 有 显 性 优势 ， 从 某 种 程度 上 说 是 因为 它 是 画 中 最 大 的 
元 素 ( 随后 我 介绍 其 他 设计 原则 的 时 候 ， 会 从 另外 的 角度 分 析 它 的 显 性 优势 ) 

Think Vitamin 在 设计 中 也 运用 了 显 性 优势 。 还 是 拿 最 新 博文 显示 方式 的 例子 加 以 说 明 。 我 
在 前 面 提 到 过 ， 最 新 博文 信息 显示 在 显著 的 位 置 上 : 位 于 页 面 左上 部 ， 并 处 于 前 景 当 中 ， 而 且 
它 的 标题 要 比 其 他 博文 的 标题 大 出 许多 。 另 外 ， 作 者 的 照片 也 使 得 最 新 博文 在 页 面 上 更 具 显 性 
优势 。 

向 下 滚动 Think Vitamin 的 页 面 时 ， 自 然 就 看 不 到 最 新 博文 了 。 如 图 6-10 所 示 ， 这 些 可 以 被 
看 成 页 面 “ 子 构成 ”的 其 他 博文 ， 使 用 具有 显 性 优势 的 图 标 和 大 标题 吸引 用 户 的 注意 力 。 可 见 ， 
通过 大 标题 和 深 色 图 标 也 可 以 达到 显 性 优势 的 效果 。 


图 6-10 Pe 
Think Vitamin 博客 在 

稍 小 的 “ 子 构成 ”中 Om mss etn 

运用 显 性 优势 ， 以 突 ee 由 
显 重要 信息 -er 

图 上 复制 E 获 Casonited ass ~ 


许可 














6.2.2 ”相似 性 
相似 性 是 指 设计 构成 中 各 种 不 同 的 元 素 之 间 彼 此 类 似 ， 这 可 以 表现 在 形状 、 颜 色 、 线 条 特 
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征 (平滑 的 还 是 锯齿 状 的 ) 以 及 质感 上 。 相似 性 使 设计 构图 更 具 吸 引力 ,因为 当 你 浏览 一 幅 作品 时 ， 
这 些 相似 因素 会 不 断 让 你 回忆 起 那些 之 前 看 过 的 相似 性 原则 的 应 用 也 为 运用 对 比 原则 ( 稍 
后 我 会 提 及 的 另 一 个 原则 ) 提供 了 良好 的 准备 条 

修 拉 在 画作 中 的 许多 方面 都 有 效 运用 了 相似 性 原则 。 画 面 中 用 来 刻画 人 物 的 形状 平滑 而 且 
简单 。 你 会 注 江 潮 相交 的 涪 状 开拓 不 断 地 出 现在 画面 中 女士 的 着 装 上 ， 以 及 大 大 小 小 的 太阳 伞 
上 ( 见 图 6-11 )。 你 还 会 看 到 相似 性 原则 在 颜色 重复 ( 比如 红 绿 重 复 ) 上 的 运用 









图 6-11 
修 拉 画 作 在 泻 染 人 物 
时 运用 了 相似 性 原 
则 一 一 各 种 形状 以 及 
颜色 重复 出 现 





在 我 的 简单 作品 ( 见 图 6-1 ) 中 也 用 到 了 相似 性 原则 。 毕 竞 画面 中 的 所 有 设计 元 素 都 是 圆 形 
它们 有 着 相同 的 颜色 ， 都 是 单一 色调 ,没有 阴影 ， 没 有 纹理 ， 也 没有 反差 

Think Vitamin 设计 的 整体 视觉 风格 也 是 运用 了 鲜明 的 基本 形状 和 纯色 调 ， 加 上 少许 线 
条 ， 而 且 没 有 渐变 。 其 中 大 部 分 用 户 界面 元 素 体现 了 相似 性 原则 ， 因 为 它们 都 是 圆 形 的 ( 见 图 
6-12 )。 网 站 的 整体 设计 理念 以 及 Logo 创意 来 自 维他命 片 或 者 圆 片 。 主 页 右 侧 的 主题 链接 、 
按钮 ， 甚 至 搜索 框 都 像 极 了 小 药片 。 类 似 这 样 的 相似 性 让 整个 设计 看 起 来 风格 统一 ， 而 这 归功 
于 设计 中 各 种 元 素 在 视觉 上 的 相互 呼应 








6.2.3 ”节奏 感 


节奏 感 通常 伴随 着 相似 性 一 同 出 现 ， 它 要 比 相似 性 更 抽象 一 些 。 关 于 节奏 感 ， 也 许 你 首先 
会 想到 音乐 。 就 像 一 段 音乐 中 Nn 军 鼓 或 者 低音 鼓 , 按 一 臻 鼓点 反复 项 击 , 一 遍 又 一 遍 重 复 不 断 ， 
从 而 :中 的 节奏 感 。 在 设计 作品 中 ,反复 使 用 某 个 元 素 或 者 设计 特征 ， 就 形成 了 设计 
中 的 节奏 感 。 就 像 相似 性 原则 一 样 ， 节 奏 感 也 使 设计 充满 吸引 力 。 当 你 欣赏 作品 时 ， 节 奏 感 不 
断 地 提醒 你 有 些 东 西 似曾相识 。 而 且 它 还 能 有 效 地 控制 方向 感 ， 并 且 使 对 比 变 得 可 行 ( 稍 后 我 
会 谈 到 这 两 个 ) 
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图 6-12 

在 Think Vitamin 整个 
网 站 中 都 可 以 看 到 相 
似 性 原则 的 运用 : 贺 
形 按钮 、 图 标 ， 以 及 
其 他 界面 元 素 | 
图 片 复制 已 获 Carsonified 


许可 





Moving on From Think 
Vitamin 








修 拉 的 画作 充分 利用 了 节 
相互 呼应 。 男 外 注意 前 景 、 中 
画面 时 ， 夯 面 的 节奏 感 就 会 吸引 你 去 欣赏 





线 以 及 水 平 线 构成 的 节奏 感 。 当 你 的 目光 扫 过 















在 我 的 简单 作品 中 几乎 没有 用 到 节 才 它 的 存在 通 代 带 产生 的 。 在 最 大 圆 、 第 
圆 以 及 最 小 圆 的 演变 中 存在 着 节奏 感 。 但 方向 感 原则 在 这 方面 的 作用 更 明显 ， 稍 后 我 会 探讨 
个 话题 


图 

相似 平面 中 反复 出 现 
， 为 修 拉 的 画 
了 节奏 感 








Think Vitamin 中 相似 性 
6-14 所 示 ， 右 侧 的 主 
相似 而 且 间 隔 均 匀 的 
标 相似 一 一 因为 代 
形成 了 滚动 页 面 时 的 节奏 感 。 这 


素 被 分 解 成 了 许多 板块 ， 当 你 浏览 页 面 





视觉 重复 感 。 如 图 
下 方 同 边栏 上 四 个 非 
中 提 到 的 图 标 和 强调 博文 标题 的 图 
页 下 来 阅读 标题 ， 而 且 
而 且 它 的 组 成 元 










] 都 是 圆 形 的 








图 6-14 


Think Vitamin 设计 中 


Moving on From Think | 。 对 节 奏 感 的 应 用 有 助 
Vitamin 和 者 阅读 设 


司 + 中 的 重要 元 素 
“人 4 








oF 图 片 复制 已 获 Carsonified 


Youn nonce son © ve comme rare 


omy ay wwe re py rewen mwa ro Me ru ce ee eno 














必 东西 看 起 来 像 砂岩 ( 或 者 根本 就 是 由 砂 
感 有 关 ， 网 





9 如 果 某 种 形状 重复 的 次 
引力 ， 因 为 质感 
背景 关系 营造 了 层次 感 


有 着 很 强 的 整体 质 












那么 这 通常 
到 这 个 原则 ) 自 


千 上 万 各 








为 对 比 原则 (下面 
昌 于 修 拉 的 画 
















感 。 随 着 欣 洛 同 ， 画 面 看 走 粗糙 

但 画作 的 局 部 质 请 ， 以 缘 都 
非常 干净 利落 提交 上 儿 同时 天 衬 使 树叶 看 起 来 更 加 平滑 透明 

我 的 简单 作品 真 的 的 一 个 ， 但 这 也 说 明了 一 个 (相对 ) 成 功 
的 设计 并 不 需要 运用 所 有 

Think Vitamin 在 设计 中 也 几 贰 感 一 一 民 大 部 分 形状 和 设计 元 素 ， 都 是 单 
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一 的 纯色 块 。 设 计 中 对 质感 的 体现 主要 来 自 文本 内 容 (我 在 第 3 章 和 附录 中 谈 到 了 很 多 关于 字 






体质 感 的 内 容 )。 由 于 整个 网 站 的 设计 几乎 没有 质感 ， 所 以 文字 的 质感 便 脱颖而出 了 
Think Vitamin 网 站 的 大 多 数 内 容 只 使 用 了 一 种 字体 族 系 ， 因 此 不 同 的 质 自 字体 的 粗细 








变化 、 大 小 差异 ， 以 及 信息 片段 周围 空白 区 域 的 多 少 - 质 
位 置 的 博文 标题 ， 不 同 于 内 容 部 分 的 质感 ， 这 有 助 于 区 分 





变化 一 一 除 


这 些 信 





透明 感 
息 之 间 的 差异 


并 占据 显 性 





6.2.5 ”方向 感 





方向 感 原则 有 助 于 引导 观众 的 视线 ， 让 他 们 全 神 贯 注 地 欣赏 作 通过 线条 ( 有 时 甚至 是 
箭头 ) 可 以 相当 明确 地 形成 方向 感 ， 但 有 时 需要 在 设计 构成 中 使 用 形状 、 阴 影 甚 至 看 不 见 的 对 
齐 方式 来 含蓄 地 形成 方向 感 

关于 修 拉 的 画作 ( 见 图 6-15), 在 ， 也 能 发 现 方向 感 的 痕迹 
遍布 整个 画面 的 人 物 组 群 形成 了 无 形 j 画面 中 明显 使 用 方向 感 原 
则 的 有 水 平 线 一 一 前 景 中 大 片 的 深 色 阴 影 ， 以 及 湖岸 引导 至 前 景 中 一 对 站 立 
的 夫妇 身上 。 另 外 ， 湖 面 、 沐 浴 在 阳光 中 的 草地 ， 以 及 阴影 所 形成 的 棱角 地 带 ， 也 都 是 很 强 的 
定向 力量 
















图 6-1 
在 修 拉 画作 中 ， 很 多 地 方 体 
现 了 方向 感 的 存在 





在 我 那 幅 简 单 的 作品 中 也 用 到 了 方向 感 原则 , 画面 中 最 大 圆 .第 二 大 圆 和 最 小 圆 排 成 了 一 列 
如 图 6-16 所 示 ， 这 些 圆 在 尺寸 上 逐个 递减 ， 在 视觉 上 排列 成 线 的 组 合 方式 所 形成 的 方向 感 ， 牵 
引 着 你 的 目光 沿 对 角 线 扫 过 画布 

在 第 5 章 中 ,我 提 到 过 用 来 摆 放 各 个 圆 的 虚拟 网 格 线 。 如 图 6-17 所 示 ， 第 二 大 圆 位 于 ( 与 
最 大 圆 边缘 相 切 的 ) 两 条 网 格 线 的 交叉 点 上 ， 这 在 视觉 第 二 大 圆 与 最 大 圆 联系 在 了 一 起 
如 果 你 在 看 最 大 的 圆 ( 确实 很 难 忽略 它 的 存在 )， 那 么 你 的 视线 会 很 自然 地 沿 着 虚拟 的 网 格 线 来 
到 第 二 大 圆 上 
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6-16 

在 我 这 幅 简 单 的 作品 
中 ， 圆 的 排列 方式 形 
成 了 很 强 的 定向 力量 





图 6-17 

在 这 幅 简单 的 作品 
中 ， 贺 在 虚拟 网 格 线 
上 的 关系 形成 了 定向 
力量 





但 是 需要 注意 的 是 ， 最 小 的 圆 并 没有 直接 位 于 任何 网 格 线 交叉 的 中 心 处 。 相 反 ， 它 位 于 最 
大 圆 与 第 二 大 圆 之 间 那 条 看 不 见 的 方向 线 上 。 另 外 ， 由 于 左 侧 第 一 条 网 格 线 正好 从 第 三 大 圆 的 


100 

















圆心 ， 所 以 最 4 E 架 在 这 
条 网 格 线 上 ， 那 么 它 


坏事 ， 但 会 破坏 最 小 圆 已 经 


话题 在 第 
Vitamin 中 的 信息 和 设计 元 素 
虚拟 线 对 齐 的 元 素 排列 方式 

其 中 一 条 虚拟 线 位 于 页 面 项 部 的 导航 栏 处 。 在 图 6-18 中 ， 你 可 以 看 到 Logo 中 文字 
“Think Vitamin” 的 头 和 尾 构成 了 一 条 中 线 
”Carsonified 策划 ”支撑 并 延长 ， 并 且 由 导航 
进一步 延伸 。 在 这 个 区 域 几乎 没有 其 他 视觉 修 和 
以 及 连接 主 Logo 和 标语 上 类 ), 这 种 对 齐 

再 看 图 6-18， 标 题 区 的 左 侧 L 入 者 
博文 。 而 第 二 条 策 直 轴 位 于 这 篇 博 文 内 容 处 的 空白 区 域 用 来 放置 作者 照片 ) 
如 此 运用 这 两 条 垂直 轴 ， 使 第 一 篇 博文 与 下 面 的 博文 相 比 ， 更 具 显 性 优势 新 博文 之 后 的 文 
章 都 是 沿 着 第 二 条 垂直 轴 排 列 的 这 样 最 新 博文 看 起 来 就 更 加 重要 了 。 由 此 产生 的 页 面 空白 可 


醒目 图 标 显 出 来 ， 这 也 使 得 照片 在 设计 构成 中 更 占 显 性 优势 ， 因 为 这 
些 照 片 一 直 延 伸 到 了 第 一 条 垂直 轴 那 里 





是 按照 虚拟 区 域 


大 拟 的 引导 线条 ( 下 文 称 它 为 轴 ) 被 标语 
内 容 ) 


变化 ， 












文字 (Home、Membership 、About 4 
上 的 细 德 


` 密 不 可 分 
吸引 浏览 者 去 













最 






丰 文 





图 6-18 

Think Vitamin 主页 的 对 
齐 方式 形成 了 引导 浏 
览 者 视线 的 定向 力量 
图 片 复制 已 获 Carsonified 


许可 


Moving on From Think 
Vitamin 


Von | > 
全 有 | 











， 特 别 是 在 博文 标题 和 博文 
几乎 完全 依靠 它们 之 间 的 


如 图 6-19 所 示 ， 方 向 感 和 对 齐 和 在 了 博文 下 
元 数据 上 。 博 文 标题 、 作 者 照片 以 及 图 标 和 评论 数 这 样 的 其 人 
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对 齐 关 系 组 合成 了 密 不 可 分 的 整体 。 博 文 标题 与 作者 照片 左 对 齐 ， 而 作者 照片 又 与 作者 姓名 、 
发 表 日 期 , 以 及 文章 分 类 平 齐 。 在 区 域 右 侧 , 图 标 、 评论 数 和 社交 媒体 工具 图 标 之 间 都 相互 对 齐 。 

一 条 粗壮 的 黑色 水 平 线条 与 社交 媒体 工具 右 对 齐 ， 一 直 延 伸 到 浏览 器 窗口 的 边缘 ， 完 善 并 
突显 了 上 面 的 虚拟 区 域 。 这 个 线条 引领 着 你 的 目光 进入 页 面 ， 而 刚才 提 到 的 所 有 对 齐 则 将 视线 
吸引 到 标题 区 域 。 当 你 阅读 了 这 篇 文章 的 基本 信息 之 后 ， 作 者 姓名 、 发 表 日 期 与 正文 内 容 之 间 
那 隐约 的 对 齐 方式 会 吸引 你 去 阅读 正文 。Think Vitamin 的 设计 之 所 以 如 此 井井有条 ， 就 像 上 面 
讲述 的 这 样 ， 正 是 因为 它 通过 深思 熟 虑 的 对 齐 关系 ， 很 好 地 运用 了 方向 感 











图 6-19 

Think Vitamin 文章 页 
向 力量 将 堆 
合 在 一 起 
图 片 复制 已 获 Carsonified 
许可 
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6.2.6 对比 关 系 
对 比 关系 原则 是 指 借助 元 素 之 间 的 差异 或 者 说 反差 ， 使 某 部 分 设计 构成 比 其 他 部 分 更 具 趣 


味 性 。 设 计 构成 中 的 元 素 可 以 在 尺寸 、 颜 色 、 数 值 ( 明亮 还 是 暗淡 )、 质 感 、 形 状 、 线 条 变化 
等 任何 能 够 想到 的 方面 进行 对 比 。 通 过 对 比 关系 可 以 形成 显 性 优势 ， 或 者 确立 前 景 /背景 关系 。 
对 比 关系 既 可 以 用 于 贯穿 整个 设计 的 指导 原则 ( 纯 白 或 者 纯 黑 的 背景 中 )， 也 可 以 少量 点 级 在 内 
容 均匀 毫 无 主 次 的 设计 中 ， 突 出 重点 ,画龙点睛 
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在 修 拉 的 画作 中 ,前景 中 那 对 比 其 他 画面 元 素 大 出 许多 的 夫妇 身上 ， 就 很 好 的 应 用 了 对 比 
原则 。 阴 影 中 的 草地 与 阳光 下 的 草地 也 有 着 强烈 的 对 比 效果 ， 使 得 阴影 中 人 物 的 轮廓 格外 清晰 ， 
而 这 清晰 的 轮廓 又 与 树叶 模糊 的 形状 形成 了 巨大 的 反差 

在 我 那 幅 简单 作品 中 , 圆 的 颜色 与 背景 颜色 之 间 使 用 了 对 比 关系 。 各 个 圆 的 尺寸 也 相差 很 大 ， 
这 可 以 说 是 对 比 原则 的 又 一 应 用 实 亿 

对 比 关系 是 Think Vitamin 设计 的 基石 。 设 计 中 使 用 的 简单 配色 方案 具有 非常 高 的 对 比 度 
非常 浅 的 奶油 色 ( 几乎 变 成 白色 ) 用 来 和 非常 深 的 灰色 ( 接近 黑色 ) 形成 对 比 。 还 有 非常 浓烈 
的 红色 , 也 是 常用 配色 。 前 文中 曾经 提 到 , Think Vitamin 的 设计 很 少 使 用 线条 , 而 且 也 没有 渐 
所 以 几乎 每 一 种 形状 或 者 样式 (无论 是 图 标 、 装 饰 块 还 是 ) 都 与 背景 形成 了 lL 

对 比 关系 在 Think Vitamin 设计 中 的 大 量 运用 ， 形 成 了 醒目 而 又 简洁 的 设计 。 正 如 上 文中 提 
到 的 ， 虽 然 Think Vitamin 设计 中 方向 感 原则 的 使 用 并 不 明显 ， 只 体现 在 隐约 的 元 素 对 齐 上 ， 但 
却 使 用 了 强烈 的 对 比 关系 而且 Think Vitamin 网 站 中 很 少 有 细微 的 颜色 变化 

Think Vitamin 在 设计 中 也 使 用 了 大 量 的 相似 性 原则 。 各 种 设计 元 素 在 形状 上 存在 着 相似 点 ， 
比如 圆 形 的 图 标 与 药片 状 的 分 类 链接 。 而 且 设计 中 几乎 没有 出 现 字体 变化 。 使 用 了 隐约 的 对 齐 
方式 ， 而 不 是 贯穿 全 局 的 修饰 性 元 素 。 这 些 相似 性 原则 的 运用 ， 进 一 步 加 强 了 ( 用 于 设计 中 基 
本 但 又 醒目 的 配色 方案 上 的 ) 对 比 关系 的 效果 


















6.3 为 什么 MailChimp 的 Logo 如 此 漂亮 : 设计 构成 和 设计 原则 的 运用 


在 上 一 章 中 我 们 看 到 ， 由 Hicksdesign ( www.hicksdesign.co.uk ) 设计 的 邮递 员 大 猩猩 的 
Logo ( 见 图 6-20 ) 巧妙 地 运用 几何 比例 营造 出 了 视觉 趣味 。 但 其 实在 这 个 Logo 的 设计 中 也 大 
量 使 用 了 设计 原则 
图 6-20 

MailChimp 的 Logo 
图 片 复制 已 获 The Rocket 
Science Group 许可 
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呈 三 角形 。 如 图 6-21 所 示 ， 虚 拟 的 线条 从 
,这 就 引导 你 的 视线 在 这 个 Logo 上 循环 





头 部 bp 
也 训 








LlE 接 到 左手 ,又 从 左手 连接 到 脚 部 ,最 后 返回 
说 MailChimp 的 Logo 是 自 包 含 的 
Logo 中 还 有 许多 其 如 果 从 邮包 那里 着 眼 ， 那 么 你 的 旬 
猩 的 如 果 从 黑猩猩 伸 出 的 左手 那里 着 眼 ， 那 么 你 的 视线 会 被 牵引 到 肩 
头 部 。 设 计 构 成 中 那 强烈 的 三 角形 本 质 ， 吸 引 着 你 浏览 完整 个 Logo 















图 6-2 
由 于 3 
造 型 ，MailChimp 的 
Logo 内 桶 而 又 独立 

而 且 在 Logo 的 内 






烈 的 三 角形 





或 中 ， 也 存在 着 很 
关系 
已 获 The Rocket 


ce Group 许可 








6.3.1 前景/ 








由 于 MailChimp 的 Logo 是 强 有 力 的 自 包含 元 素 ， 所 以 其 中 的 前 景 
猩猩 周身 所 有 特征 ( 当然 也 包括 邮包 ) 上 运用 的 明暗 效果 ， 使 其 具有 立 作 
会 突然 跳 到 你 的 眼前 


A 
背 









模糊 。 黑 
， 仿 佛 黑猩猩 真 的 
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当 Logo 用 在 比较 复杂 的 设计 作品 中 时 ， 这 种 前 景 /背景 关系 就 派 上 用 场 了 。 比 方 说 ， 在 图 
6-22 中 ， 请 注意 带 有 立体 感 的 黑猩猩 从 MailChimp 主页 那 单 调 的 背景 中 脱颖而出 的 效果 ， 就 仿 
佛 是 黑猩猩 与 标题 以 及 页 面 上 其 他 元 素 类 型 处 在 不 同 的 层次 上 一 样 。 


图 6-22 

MailChimp Logo 的 
强烈 立体 感 ， 使 它 在 
应 用 环境 中 处 于 前 景 
之 中 


SO -人 司 StillFree, 
Just Bigger. 








6.3.2 ” 显 性 优势 


由 于 MailChimp 的 Logo 是 自 包含 元 素 ， 所 以 它 并 没有 大 量 运用 显 性 优势 原则 。 但 是 ， 因 
为 Logo 有 如 此 强烈 的 独立 性 ,所 以 用 在 任何 设计 作品 中 , 它 都 是 一 个 不 错 的 元 素 。 注意 在 主页 中 ， 
Logo 扮演 着 视觉 船 锚 一 样 的 角色 , 呈现 出 强烈 方向 性 , 钓 住 你 的 视线 并 引导 你 浏览 至 页 面 标题 。 


6.3.3 ”相似 性 


正如 我 在 第 5 章 中 演示 的 那样 ，MailChimp 的 Logo 是 由 一 系列 圆 构成 的 。 这 使 得 黑猩猩 形 
象 侈 满 ， 而 这 自然 而 然 就 会 在 外 形 上 引起 相似 性 。 并 且 这 些 由 圆 构成 的 弧 线 外 形 与 黑猩猩 其 他 
部 分 的 特征 也 相互 呼应 。 注 意 观 察 图 6-23， 在 黑猩猩 身上 几乎 看 不 到 任何 直线 。 黑 猩猩 的 手 和 
指头 由 一 系列 缓慢 过 渡 的 平滑 曲线 勾勒 而 成 ， 就 连 邮 包 也 是 由 一 些 曲 线 组 成 的 
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图 6-23 
由 于 MailChimp 的 Logo 
全 部 由 曲线 组 成 ， 所 
腿 好 地 运用 了 相 
似 性 原则 

图 片 复制 已 获 The Rocket 


Science Group 许可 








黑猩猩 身上 的 很 多 细节 部 分 在 外 形 上 也 是 相似 的 。 比 如 ， 黑 猩猩 左手 附近 那 尖 尖 的 毛发 一 一 
是 由 一 些 曲 线 构成 的 。 值 得 注意 的 是 ， 类 似 的 曲线 还 用 在 了 黑猩猩 手指 之 间 的 分 界线 上 。 而 且 
黑猩猩 的 微笑 也 和 这 些 毛 发 的 曲线 相似 





6.3.4 ”节奏 感 


在 整个 
图 6-24 中 ， 











左 腿 和 后 腿 之 间 
看 起 来 像 在 走动 多 被 黑猩猩 皮 
常 粗糙 。 当 目光 转移 到 黑猩猩 的 左 脚 上 时 ,你 
到 右 膝 处 时 ， 这 里 的 毛发 已 经 几乎 看 不 到 任何 
般 的 线条 所 打 断 










及 那么 粗糙 了 。 最 后 目光 移 
黑猩猩 右 脚趾 头 的 毛发 
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图 6- 





的 四 肢 带 有 极 


图 片 复制 已 获 The Rocket 
Science Group 许可 





6.3.5 ”质感 


MailChimp 的 Logo 也 充分 利用 了 质感 原则 。 总体 来 说 ， 这 个 Logo 散发 着 柔软 的 光泽 ， 这 
使 不 同 的 组 成 部 分 有 着 -的 感官 效果 。 在 图 6-25 中 ， 你 可 以 看 到 Logo 设计 中 也 运用 了 质感 
的 变化 。 比 如 ， 请 注意 尖 尖 的 毛发 与 黑猩猩 那 光 滑 的 腹部 ， 以 及 手 部 、 脚 部 和 脸 
的 质感 区 别 。Logo 中 最 大 的 质感 变化 出 现在 锂 亮 的 邮包 带 扣 上 , 还 有 黑猩猩 帽子 


















图 6-25 
虽然 MailChimp Logo 
整体 质感 柔软 ， 但 仍 


然 表 
的 质感 

复制 已 著 The Rocket 
Science Group 许可 


出 了 一 些 不 同 
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6.3.6 方向 感 


MailChimp Logo 中 有 着 很 强 的 方向 感 。 由 于 黑猩猩 探 身 前 倾 ， 而 且 明 显 像 是 在 迈 着 轻快 的 
步伐 走路 或 者 跑步 ， 这 使 Logo 整体 给 人 以 前 进 的 方向 感 。 黑 猩猩 四 肢 的 安排 方式 也 给 人 以 强烈 
的 方向 感 。 左 手 、 左 脚 以 及 身后 的 右 脚 从 黑猩猩 的 躯体 中 伸展 出 来 ， 引 导 你 的 视线 在 其 中 循环 
如 图 6-26 所 示 ， 如 果 你 的 视线 停留 在 身后 的 右 脚 上 ， 那 么 很 快 就 会 被 邮包 带子 引导 至 黑猩猩 的 


图 6-26 

黑猩猩 设计 中 的 定向 
力量 引导 视线 在 整个 
Logo 中 循环 

图 片 复制 已 获 The Rocket 
Science Group 许可 





6.3.7 对 比 关系 


在 Think Vitamin 网 站 中 的 作用 不 同 ， 它 并 不 是 MailChimp Logo 设计 的 基础 ， 
但 3 9 助 于 美化 Logo 设计 。 我 刚刚 谈 到 过 ， 汐 对 比 关系 有 助 于 构造 出 视觉 
吸引 力 。 这 一 要 素 还 被 巧妙 地 运用 在 几 个 关键 区 域 ， 以 便 使 设计 中 关键 的 部 分 更 吸引 眼球 

注意 在 图 6-27 中 ， 接 近 黑 猩猩 头 部 的 背面 有 一 圈 较 暗 的 皮毛 。 这 与 帽子 黑色 的 边缘 一 起 ， 
勾勒 出 了 黑猩猩 的 整个 脸 部 轮廓 ， 并 让 它 更 加 立体 突出 

MailChimp 的 Logo 中 也 用 到 了 补 色 原 理 。 黑 猩猩 的 邮包 和 帽子 都 是 蓝 色 的 ， 而 皮毛 和 腹部 
的 基本 色调 有 几 分 橙色 。 蓝 色 和 橙色 被 认为 是 相互 对 立 的 两 种 颜色 ， 就 像 和 白色 的 对 立 关 
系 一 样 ， 我 会 在 第 9 章 里 详细 讲解 颜色 方面 的 知识 。 这 种 颜色 反差 让 邮包 和 黑猩猩 相互 衬托 更 
加 醒目 
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关系 被 用 
猩 的 脸 











图 片 复制 已 获 TheRocket 
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6.4 小 结 
组合 ， 但 在 了 解 了 本 章 和 上 一 章 内 


外 、 形 状 ， 还 有 空白 区 域 和 
止 的 几何 比例 ， 


; 的 概念 促成 了 设计 之 美 。 不 同 于 只 需要 小 人 
理解 设计 构成 并 且 精 通 设 i 则 绝对 是 创作 优美 设计 的 关键 所 在 。 当 某 些 人 评 个 人 “有 设 
计 眼 光 ” 时 ， 他 们 其 实 是 在 讨论 设计 原则 。 伟 大 的 设计 师 都 知道 如 何 恰如其分 3 和 设计 原则 
口 挖掘 工作 中 所 看 到 的 一 切 设计 原则 。 当 你 再 次 看 到 视觉 效果 极 好 的 网 站 时 ， 留 意 下 那些 
吸引 你 视线 的 显 性 优势 。 研 究 下 方向 感 是 如 何 引导 视线 浏览 页 面 的 ， 或 者 有 没有 涉及 其 
他 一 些 设计 原则 
D 在 上 一 章 中 ， 如 果 你 创作 了 自己 的 简单 作品 ， 那 么 可 以 试 着 从 基础 开始 ， 用 它 来 练习 使 
用 设计 原则 。 每 次 只 集中 练习 一 种 本 章 中 提 到 的 设计 原则 即 可 






很 多 人 认为 设计 无 非 就 和 
就 会 明白 正 是 许多 无 天 






















第 章 


激活 信息 : 建立 视觉 层次 结构 


和 文艺 复兴 时 期 的 雕塑 或 者 印象 派 绘画 作品 相 比 ， 今 天 大 多 数 设计 师 创作 的 设计 构成 在 
信息 量 上 显得 更 为 繁杂 ， 目 标 更 加 清晰 。 比 如 ， 如 果 要 设计 一 个 博客 网 站 的 界面 ， 那 么 针对 
浏览 用 户 的 设计 就 会 有 明确 的 任务 和 目标 。 既 要 满足 浏览 用 户 在 界面 中 任意 跳 转 的 需求 ， 同 
时 还 要 保证 文章 的 易 读 性 。 信 息 分 类 应 当 易于 浏览 、 便 于 查找 ， 文 章 信息 及 其 作者 信息 需要 
清晰 易 读 。 

创作 具有 视觉 吸引 力 的 设计 作品 ， 对 于 吸引 新 用 户 并 向 他 们 传达 思想 观点 是 非常 重要 的 。 
但 是 如 果 用 户 在 设计 中 找 不 到 他 们 需要 的 东西 ， 那 么 徒 有 引 人 注 目的 外 观 构 成 也 没有 太 大 意义 。 
关于 Web 设计 已 经 形成 了 很 多 可 视 化 标准 和 用 户 界面 模式 ， 而 且 有 些 已 经 得 到 了 用 户 的 认同 。 

要 想 用 户 能 够 浏览 网 站 或 应 用 程序 中 的 所 有 信息 ， 那 么 相关 信息 不 仅 要 表述 准确 ， 也 应 有 
清晰 地 层次 结构 。 


7.1 什么 是 “层次 结构 ” 


术语 层次 结构 指 的 是 ， 信 息 从 重要 到 不 重要 是 线性 推进 的 ， 但 这 种 说 法 也 不 完全 准确 。 用 
户 界面 中 一 则 消息 重要 与 否 ， 要 视 具体 情况 而 定 。 如 果 在 经 常 访问 的 网 站 上 看 到 一 篇 新 博文 ， 
你 可 能 不 太 关心 文章 的 发 表 日 期 。 但 如 果 你 正在 阅读 一 篇 频繁 更 新 的 软件 入门 技术 文本 ， 那 么 
文章 的 发 表 日 期 可 能 就 非常 重要 了 。 

虽然 有 时 你 能 准确 地 评估 信息 的 相对 重要 性 ， 但 是 信息 的 可 视 化 组 织 过 程 ， 远 比 单纯 按 信 
息 的 重要 性 排序 的 过 程 要 微妙 得 多 。 

用 标准 博客 网 站 布局 ( 见 图 7-1) 举例 说 明 。 这 样 的 布局 在 博客 网 站 中 很 常见 。 博 客 
网 站 的 Logo 和 标题 位 于 顶部 。 处 于 这 个 位 置 的 还 有 导航 栏 ， 可 能 还 包括 关于 博客 名 称 的 文 
字 Logo。 在 这 种 布局 的 HTML 代码 中 ， 这 些 信息 往往 包含 在 我 们 通常 所 称 的 博客 网 站 的 
“页 眉 ” 中 。 
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图 7-1 

大 部 分 博客 网 站 的 布 
局 通常 都 与 此 类 似 。 
不 同 区 域 的 安排 目的 
在 于 营造 出 层次 结构 








通常 页 由 下 面 就 是 主要 内 容 区 域 。 在 主要 内 容 区 域 中 ， 可 以 看 到 博文 内 容 ， 其 中 包括 文章 
标题 、 实 际 内 容 、 发 表 日 期 、 作 者 或 者 文章 类 别 这 样 的 元 数据 。 

博文 内 容 下 方 就 是 读者 对 文章 的 评论 。 每 条 评论 往往 都 会 附带 着 留言 者 的 照片 ， 以 及 评论 
的 日 期 和 时 间 。 

在 主要 内 容 区 域 一 侧 通常 会 有 侧 边 栏 区 ， 这 里 一 般 会 罗列 着 文章 分 类 、 内 容 搜索 功能 、 订 
阅 信 息 ， 或 许 还 有 几 则 广告 。 

页 面 的 底部 一 般 是 页 脚 。 页 脚 通常 会 重复 页 由 导航 中 的 链接 ， 但 也 常常 包括 其 他 的 链接 ， 
比如 链 向 撰写 博文 的 内 容 管理 系统 ( CMS ) 或 者 作者 保留 的 版 权 内 容 。 

标准 博客 网 站 布局 中 的 各 个 区 域 并 不 是 完全 按照 重要 性 线性 排列 的 ， 而 是 为 展现 各 个 区 域 
的 差异 而 布置 的 。 


7.1.1 层次 结构 富有 表现 力 


目前 尚 不 存在 一 种 适用 于 各 种 情形 的 万 能 模板 ， 能 将 信息 按 重 要 性 精确 排序 。 相 比 起 来 ， 
建立 视觉 层次 结构 更 富有 表现 力 但 却 缺乏 科学 依据 。 而 且 ， 信 息 都 有 自身 特点 ， 又 和 其 他 信息 
相互 关联 。 

HTML 将 信息 分 解 成 一 定 的 层次 结构 - 既 有 类 似 H1、H2、H3 这 样 带 有 线性 区 别 的 页 眉 
标签 ， 也 有 像 引 用 和 代码 这 样 的 标签 ， 它 们 仅仅 将 不 同类 别 的 信息 区 分 出 来 ， 而 不 做 排列 分 级 。 

在 这 方面 ， 建 立 视觉 层次 结构 的 方式 多 少 与 HTML 有 些 相似 。 有 时 用 户 需 求 或 者 市 场 目标 
会 使 得 有 些 信息 的 重要 程度 毫 无 疑问 地 高 于 其 他 信息 ， 但 信息 之 间 还 存在 很 多 细微 差别 ， 需 要 
更 细腻 的 手法 才能 表达 出 来 。 
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7.1.2 ”影响 层次 结构 的 诸多 视觉 因素 


在 尝试 建立 视觉 层次 结构 时 ， 很 多 钻研 设计 的 新 人 ， 往 往 会 太 刻意 地 想 要 追求 视觉 效果 。 
在 本 章 中 ,我 会 展示 区 分 信息 和 设计 元 素 之 间 的 差异 ， 可 以 利用 很 多 种 不 同 的 方法 : 改变 空白 
区 域 、 文 字 大 小 ， 字体， 或 者 视觉 重量 感 ， 还 可 以 改变 颜色 ， 或 者 使 用 诸如 线条 、 图 标 、 或 者 
色 块 等 装饰 元 素 。 

因为 不 知道 从 何人 手 ， 很 多 设计 师 新 人 会 试图 一 次 性 改变 所 有 上 述 视 觉 因素 ， 而 且 通 常会 
先 修改 最 明显 的 视觉 因素 。 如 果 是 正在 设计 一 篇 博文 的 标题 部 分 ， 那 么 他 们 很 可 能 会 改 用 更 大 
的 字体 ， 更 换 颜色 ， 同 时 在 上 面 添加 线条 或 者 背景 图 片 ， 但 这 样 做 通常 都 不 能 实现 令 人 满意 的 
效果 。 建 立 视觉 层次 结构 的 最 大 奥秘 ,在 于 那些 最 不 起 眼 的 视觉 因素 ( 比如 空白 区 域 的 使 用 比例 ) 
往往 会 带 来 意 想不到 的 效果 。 

如 果 你 从 来 没有 跳 过 萨 尔 萨 舞 ， 那么 当 随 着 萨 饼 萨 音乐 起 舞 时 ， 你 的 舞姿 可 能 不 会 太 漂亮 。 
除非 你 天 赋 异 豪 ( 或 者 在 其 他 大 种 上 颇 有 经 验 )， 否 则 可 能 会 很 难堪 。 即 便 你 之 前 已 经 看 过 一 些 
熟练 锋 者 的 跳 法 ,但 想 通过 观察 来 领会 舞步 ,还 是 很 困难 的 。 你 可 能 发 现 他 们 是 先 一 个 后 退 停顿 ， 
接着 一 个 手臂 扭 身后 转身 ， 然 后 一 个 自由 舞步 ， 最 后 再 旋转 两 次 ， 但 你 根本 不 知道 这 些 舞步 的 
名 称 ， 况 且 舞 者 移动 得 非常 快 ， 你 都 来 不 及 模仿 。 

如 果 先 学 会 如 何 分 辨 音乐 的 节拍 ， 然 后 再 跟着 节拍 学 一 些 基本 的 舞步 ， 那 就 为 学 习 萨 尔 萨 
舞 黄 定 了 良好 的 基础 。 你 学 到 的 一 切 ， 以 及 看 到 的 一 切 ， 都 离 不 开 你 之 前 的 框架 基础 。 如 果 学 
会 三 步 转 花 式 和 身体 交错 引导 等 舞步 ， 作 为 一 个 新 手 你 的 表现 就 相当 不 错 了 。 经 过 不 断 地 学 习 
和 练习 ， 你 就 会 成 为 一 名 很 棒 的 萨 尔 萨 舞 者 。 

学 习 设计 ( 信息 的 表达 和 区 分 ) 和 学 习 舞 蹈 非常 相似 。 首 先 ， 你 必须 学 会 基本 动作 ， 然 后 
才能 连贯 成 复杂 的 动作 。 但 设计 中 的 基本 步骤 ， 不 像 舞 蹈 的 基本 动作 那样 众所周知 ， 那 么 明显 。 

影响 信息 层次 结构 的 视觉 因素 ， 就 像 踏 着 音乐 节拍 的 舞步 。 如 果 你 能 够 单独 观察 研究 每 一 
个 视觉 因素 ， 并 付 诸 实践 ， 就 能 更 容易 地 可 会 贰 通 ， 将 它们 烽 合 在 一 起 。 


7.2 ”层次 结构 因素 


即便 是 我 之 前 提 到 的 基本 博客 网 站 布局 ， 对 于 新 手 来 说 也 还 是 太 复杂 了 。 这 个 整体 布局 的 
视觉 层次 结构 在 于 其 信息 区 域 彼此 各 不 相同 。 不 仅 这 些 信息 区 域 之 间 存 在 着 层次 关系 ， 而 且 各 
个 子 区 域内 部 也 有 特定 的 层次 关系 。 

为 了 讲解 创建 视觉 层次 结构 的 基本 知识 ， 我 们 需要 先 了 解 最 基本 的 信息 层次 结构 。 我 将 完 
全 用 文字 来 设计 一 篇 博文 ( 就 像 在 博客 网 站 主页 上 看 到 的 那样 )， 包 括 博文 标题 、 正 文摘 要 ， 以 
及 引导 大 家 阅读 更 多 内 容 的 内 容 摘要 。 另外 还 包括 像 发 表 日 期 、 文 章 分 类 、 作 者 、 评 论 数 这 样 
的 博文 元 数据 。 

显然 ， 博 文中 有 一 些 信息 要 比 其 他 信息 更 重要 一 些 。 标题 显 然 是 最 重要 的 ， 因 为 它 负责 告 
知 读者 文章 的 主题 。 接 着 第 二 重要 的 信息 应 该 是 正文 摘要 ， 当 然 这 也 要 视 具体 情况 而 定 。 然 而 ， 
像 作 者 姓名 、 发 表 时 间 、 文 章 分 类 以 及 评论 数 这 类 元 数据 的 重要 性 目前 还 有 待 商 椎 。 
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也 许 这些 元 数据 同属 一 个 重要 性 级 别 ， 但 它们 在 概念 上 肯定 彼此 不 同 ， 而 且 与 其 他 信息 之 
间 的 概念 关联 也 有 所 不 同 。 你 通常 可 能 会 这 样 表 达 : 这 篇 文章 “由 " 某 某 作者 发 表 , 文 章 标 题 " 属 于 ” 
某 某 分 类 , 这 篇 文章 “有 ”3 条 评论 , 这 篇 文章 是 “在 ” 某 日 某 时 发 布 的 。 我 们 谈论 信息 的 方式 ， 
多 少 就 已 经 表明 了 这 些 信息 在 概念 上 的 差异 。 


7.2.1 ”空白 区 域 


要 想 真 正 精通 信息 之 间 差 异 的 表达 方式 ， 我们 需要 先 分 离 出 构成 这 些 表达 方式 的 变量 。 其 
中 最 重要 的 ， 同 时 也 许 是 最 具 传奇 色彩 的 变量 ,就 是 空白 区 域 的 用 法 。 术 语 “ 空 白 区 域 ” 通 常 
用 来 描述 没有 任何 信息 ,或 者 不 包含 任何 其 他 设计 元 素 的 区 域 。 你 可 能 曾经 听 过 类 似 这 样 的 说 法 ， 
“应 该 多 使 用 一 些 空白 区 域 "， 或 者 “空白 区 域 太 多 了 "。 但 这 些 说 法 背后 的 真正 含义 是 什么 呢 ? 

被 大 片 空白 区 域 围绕 的 信息 往往 看 起 来 比 其 他 信息 更 重要 ， 两 条 信息 之 间 的 空白 区 域 很 小 ， 
常常 就 会 显得 它们 彼此 之 间 有 关联 。 

为 了 隔离 观察 空白 区 域 对 层次 关系 的 影响 ， 首 先 需 要 保持 其 他 变量 不 变 。 所 以 ， 我 准备 了 
一 个 字体 完全 相同 ( Helvetica 字体 )、 大 小 完全 一 致 ( 12 磅 )、 常 规 粗细 ( 没有 粗 体 ， 也 没有 斜 
体 ) 的 设计 作品 。 


1. 使 用 网 格 管理 空白 区 域 

为 了 更 好 地 利用 空白 区 域 ， 我 将 使 用 在 前 几 章 中 提 到 过 的 几何 方法 规划 空白 区 域 。 我 们 从 
比例 为 3 : 4 的 画布 开始 ， 先 在 居中 的 位 置 划 出 内 容 的 有 效 区 域 一 一 派生 自 画 布 尺寸 ， 比 例 为 
3 : 4 的 矩形 ( 见 图 7-2 )。 因 此 ， 巾 于 画布 高 300 磅 ， 那 么 有 效 区 域 设 计 成 宽 为 300 磅 ， 高 为 
300 x 0.75= 225 磅 。 








图 7-2 

在 该 例 中 ,根据 3 : 4 
的 比例 关系 设计 了 一 
块 画布 和 有 效 区 域 











在 有 效 区 域内 的 右 侧 ， 也 按 3 : 4 比例 划分 出 一 个 更 小 的 矩形 ， 设 计 成 一 个 宽 栏 。 这 就 形成 


第 7 章 激活 信息 : 建立 视觉 层次 结构 113 


了 一 条 划分 画布 的 分 界线 。 设计 Web 页 面 布局 时 ,你 也 可 以 使 用 类 似 的 方式 。 通过 这 种 分 割 方式 ， 
就 划分 出 一 个 较 宽 的 正文 区 域 和 一 个 相对 较 罕 的 侧 边栏 。 


2. 使 用 空白 区 域 构建 层次 结构 
图 7-3 是 仅 使 用 空白 区 域 所 构建 的 层次 结构 的 初始 设计 效果 。 可 以 看 到 ， 在 这 种 限制 条 件 
下 区 分 信息 的 方式 十 分 有 限 。 以 下 是 我 所 能 完成 的 最 佳 设计 。 





图 7-3 
MY FIRST BLOG Miscellaneous 受 字 体 和 字 码 的 限 
David Kadavy May 31, 2004 — 8:16pm 制 ， 我 必须 依靠 精心 
3 Comments 设计 的 空白 区 域 来 建 
立 视觉 层次 结构 


Okay, I'm finally trying out 
this blog thing. | don't really 
have any particular intentions 
for this blog, except to ramble 
(and perhaps inform) about 
design, web design and 

the like... 





More >> 








口 把 文章 标题 设 为 全 大 写字 母 ， 而 且 加 宽 字 距 ， 以 便 把 标题 区 分 凸显 出 来 。 此 外 我 还 把 标 
题 放 在 了 设计 构成 的 左上 部 ， 因 为 用 户 大 多 从 这 里 开始 浏览 。 注 意 我 不 推荐 在 标题 中 使 
用 小 写字 母 ( 参见 附录 B )。 

口 作 者 名 紧 挨 着 文章 标题 ， 以 暗示 两 条 信息 之 间 存 在 某 种 关系 。 

口 其 他 的 元 数据 ， 比 如 发 表 时 间 和 文章 分 类 ， 也 放置 在 了 设计 构成 的 顶部 ， 但 以 右 对 齐 的 
方式 处 于 右 侧 。 元 数据 和 标题 之 间 的 水 平 位 置 暗示 着 这 些 信息 之 间 有 关联 ， 但 因为 这 些 
元 数据 在 最 右 侧 ， 所 以 并 不 突出 

口 博文 摘要 的 正文 部 分 与 之 前 划分 的 分 界线 平 齐 。 由 于 它 非常 接近 设计 作品 的 中 心 ， 左 侧 
的 大 片 空 白 区 域 将 其 突显 了 出 来 ， 而 且 它 那 硕大 的 尺寸 还 获得 了 很 好 的 视觉 重量 感 ， 所 
以 博文 摘要 的 正文 部 分 在 整个 设计 构成 中 占据 了 相当 突出 的 位 置 。 

口 链接 “More>>” 位 于 有 效 区 域 的 右 下 底部 。 这 个 位 置 在 概念 上 有 着 指向 “More” 的 认 知 
表达 力 。 而 且 链 接 周围 有 着 大 量 的 空白 区 域 ， 所 以 它 看 起 来 相当 显眼 。 


3. 明确 该 用 多 少 空白 区 域 


正如 几何 关系 会 影响 设计 作品 一 样 ， 几 何 关系 也 会 影响 设计 元 素 彼此 之 间 的 相互 关系 。 比 
方 说 ,博文 标题 和 作者 姓名 之 间 空 白 区 域 的 大 小 并 不 是 随意 设置 的 。 如 图 7-4 所 示 ， 这 两 个 元 
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素 之 间 空 白 区 域 的 高 度 与 大 写字 母 本 身 的 高 度 相同 。 


着 访 用 守 说 证 衣 之 MY FIRST BE88 
3 3 元 素 之 和 

空白 区 域 的 大 小 ， 比 如 博文 标题 与 David Kadavy 

作者 姓名 之 间 的 空白 区 域 大 小 


用 同样 的 方法 还 可 以 把 评论 数 元 素 从 设计 构成 右上 方 的 其 他 元 数据 中 分 离 出 来 。 而 且 , 文 
章 分 类 名 称 和 时 间 蕉 之 间 的 空白 区 域 看 起 来 要 小 一 些 。 它 们 之 间 的 间隔 为 半 个 大 写字 母 的 高 度 。 
如 此 使 用 空白 区 域 为 设计 营造 了 节奏 感 和 秩序 感 ， 使 设计 作品 看 起 来 “干净 清 严 "。 只 是 简 
单 地 考虑 元 素 之 间 空 白 区 域 的 大 小 ， 并 保持 一 致 ， 就 已 经 向 创作 简洁 的 设计 作品 迈进 了 一 大 步 。 


4. 使 用 空白 区 域 和 和 斜体 字 

图 7-5 中 再 次 尝试 仅 用 空白 区 域 来 构建 层次 结构 ， 只 是 这 次 我 在 里 面 加 入 了 一 些 斜 体 字 。 
这 只 是 视觉 效果 上 一 个 很 小 的 改变 ， 但 却 是 有 效 区 分 信息 的 一 种 方法 。 在 图 7-5 所 示 的 设计 作 
品 中 ,我 仍然 使 用 了 大 写 标题 ， 但 不 同 以 往 的 是 ， 这 次 让 标题 和 作者 姓名 一 起 与 分 割 线 右 对 齐 ， 
而 正文 内 容 在 另 一 侧 与 分 割 线 左 对 齐 。 这 形成 了 一 种 视觉 上 的 方向 感 ， 牵 引 着 你 的 视线 从 标题 
转移 到 正文 部 分 。 

这 次 时 间 截 被 放置 在 一 块 特殊 区 域内 ， 所 以 它 不 再 和 其 他 元 素 ( 像 文章 分 类 和 评论 数 ) 混 
在 一 起 。 请 注意 这 种 布局 对 你 感知 日 期 的 影响 。 这 种 排列 方式 使 日 期 看 起 来 更 重要 了 ， 至 于 合 
不 合适 就 要 视 具体 内 容 而 定 。 





图 7-5 
斜体 字 是 区 分 信息 的 MY FIRST BLOG 
另 一 种 不 错 的 选择 David Kadavy 


Okay, Pm finally trying out 
this blog thing. | don’'t really 
have any particular intentions 
for this blog, except to ramble 
(and perhaps inform) about 
design, web design and 

the like... 


31 Miscellaneous 
a 3 Comments 





8:16pm More >> 








第 7 章 激活 信息 : 建立 视觉 层次 结构 


5. 使 用 四 列 网 格 线 
相 比 之 前 的 网 格 ， 在 以 下 设计 作品 中 要 使 用 的 网 格 在 设计 上 显得 更 标准 一 些 。 很 多 时 候 ， 


网 格 被 用 来 将 设计 中 的 有 效 区 域 分 割 成 几 列 。 在 下 面 这 个 例子 中 ， 我 将 有 效 区 域 划分 为 了 四 列 
( 见 图 7-6)。 





图 7-6 

在 下 面 的 设计 构成 
中 ,我 将 有 效 区 域 划 
分 为 等 宽 的 四 列 











请 注意 图 中 在 每 条 主 分 割 线 两 侧 还 各 有 一 条 坚 线 ， 用 来 表示 每 一 列 的 “装订 线 "， 这 在 稍 后 
设计 作品 时 会 用 到 。 这 个 装订 线 在 列 与 列 之 间 设 定 了 边界 ， 以 避免 两 个 相 邻 列 网 格 中 的 文字 元 
素 交 得 在 一 起 。 

均匀 划分 的 网 格 ， 可 以 相对 简单 地 提升 设计 的 通用 性 。 如 图 7-7 所 示 的 四 列 网 格 ， 可 以 应 
用 在 标准 博客 网 站 布局 中 。 其 中 前 三 列 可 以 放置 主 区域 中 的 文本 ， 而 另外 一 列 则 用 于 显示 侧 边 
栏 信息 。 或 者 使 用 两 列 作为 主要 内 容 区 域 ， 而 其 他 两 列 一 一 无 论 是 并 排放 在 右 侧 ， 还 是 分 列 在 
主要 内 容 区 域 两 侧 一 一 都 可 用 于 放置 侧 边栏 内 容 








7-7 
四 列 网 格 的 内 容 组 织 
方式 丰富 多 样 













































































7.2.2 ”字体 粗细 和 字号 


除了 精心 编排 空白 区 域 ， 调 整 字体 的 粗细 和 字号 也 对 区 分 设计 信息 大 有 神 益 。 很 多 缺乏 经 
验 的 设计 师 为 了 体现 信息 的 多 样 性 ， 首 先 会 尝试 使 用 不 同 的 字体 ,但 先 调整 字体 粗细 和 字号 等 
视觉 因素 可 以 提高 设计 的 通用 性 ， 从 而 创作 出 优雅 的 设计 作品 。 
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1. 字体 粗细 
在 图 7-8 中 ,为 了 进一步 确立 层次 结构 ， 我 使 用 了 粗 体 字 ， 但 在 整个 设计 作品 中 仍然 只 有 
一 种 字号 。 而 且 ， 也 没有 使 用 斜体 ， 以 便 让 读者 真切 感受 到 字体 粗细 变化 对 层次 结构 的 影响 。 





图 7-8 

在 设计 中 运用 粗 体 ， MY FIRST BLOG Miscellaneous 
会 使 一 些 元 素 在 视觉 David Kadavy May 31, 2004 
上 更 加 突出 8:16pm 


Okay, rm finally trying out this blog 
thing.1don't really have any particular 
intentions for this blog, except to 
ramble (and perhaps inform) about 
design, web design and the like... 


3 COMMENTS More >> 








该 设计 作品 看 来 与 第 一 个 设计 非常 相似 ， 但 也 有 一 些 差异 。 以 下 是 我 所 做 的 改进 。 

口 加 粗 了 标题 ,并 全 部 使 用 大 写 。 这 使 得 标题 更 加 引入 注目 - 我 还 加 粗 了 主体 中 的 正文 文字 ， 
以 期 在 它 和 标题 之 间 产 生 视觉 上 的 关联 。 为 了 避免 主体 文字 区 域 在 设计 构成 中 占据 太 多 
的 显 性 优势 ， 我 增加 了 文字 之 间 的 行距 ( 或 者 利用 CSS 中 的 1ine-height )， 以 图 稍微 
缓解 文本 的 厚重 感 ( 更 多 关于 质感 的 内 容 请 参阅 附录 A )。 

口 将 评论 数 从 其 他 元 数据 中 分 离 出 来 。 这 样 评 论 数 就 更 靠近 正文 部 分 ， 从 而 改变 了 受众 获 
取 这 则 信息 的 方式 。 这 种 设计 暗示 着 评论 和 博文 实际 内 容 之 间 有 着 更 紧密 的 联系 。 而 在 
第 一 个 设计 作品 中 ,评论 数 与 文字 分 类 、 时 间 蕉 混在 一 起 ， 这 就 显得 读者 的 评论 似乎 无 
关 紧 要 

口 沿 第 一 列 网 格 线 对 齐 了 作者 名 和 正文 部 分 。 这 种 设计 将 这 两 条 信息 联系 起 来 。 此 外 ， 作 
者 名 与 标题 足够 靠近 ,以 显示 它们 之 间 的 关联 。 同 时 ,标题 延伸 到 整个 设计 作品 的 最 左 端 ， 
提升 了 其 重要 性 


2. 字号 

使 用 同样 的 网 格 ， 我 又 制作 了 另外 一 个 设计 作品 ( 见 图 7-9 )， 但 这 次 我 只 改变 了 字号 这 个 
视觉 因素 ， 甚 至 连 字体 粗细 都 没有 修改 。 我 把 标题 变 得 足够 大 ( 即使 标题 上 面 还 安排 了 其 他 元 
数据 )， 这 样 它 在 整个 设计 作品 中 仍 占据 显 性 优势 - 我 把 作者 名 称 左 对 齐 放 在 了 标题 之 上 ， 而 文 
章 分 类 和 日 期 则 是 用 全 部 大 写 的 小 号 字 靠 右 排列 - 
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图 7-9 
David Kadavy MISCELLANEOUS 。 MAY 31, 2004 -8:16PM 使 用 夸张 的 字号 显示 
和 博文 标题, 由 此 一 来 ， 

My First Blog 3 
置 了 其 他 元 数据 ， 也 


不 会 取代 标题 的 重要 


性 
Okay, I'm finally trying out this blog thing. | 


don't really have any particular intentions 
for this blog, except to ramble (and 
perhaps inform) about design, web design 
and the like... 


3 COMMENTS MORE >> 











虽然 这 三 条 元 数据 并 排放 在 一 起 ， 形 成 了 视觉 上 的 连贯 性 ， 但 作者 名 称 又 独 具 一 格 。 作 者 
名 称 的 字号 较 大 ， 并 且 由 大 小 写字 母 组 合 而 成 ， 目 的 是 为 了 在 当前 上 下 文 环境 中 表示 它 代 表 着 
一 个 人 ， 而 不 是 一 组 数据 。 

为 了 与 正文 部 分 区 分 开 来 ， 评 论 计数 部 分 和 “MORE>>”( 更 多 内 容 ) 链接 使 用 了 稍 小 的 全 
大 写字 体 。 

很 显然 ,字号 的 改变 会 对 层次 结构 产生 巨大 的 影响 ,但 这 些 字号 我 并 不 是 随便 选择 的 。 早 
期 的 印刷 者 不 仅 受制 于 可 选 的 字体 类 型 ( 因为 创造 一 种 新 字体 是 一 个 非常 复杂 的 过 程 )， 而 且 很 
大 程度 上 也 受 字号 的 限制 。 实 际 上 ， 当 一 种 新 字体 诞生 之 后 ， 一 般 会 为 这 种 字体 相应 制作 不 同 
尺寸 的 活字 。 

这 种 限制 也 算是 一 种 福音 ， 因 为 字号 变化 最 好 是 遵循 一 定 的 比例 。 既 然 还 有 很 多 其 他 方法 
能 区 分 信息 ， 那 最 好 将 字号 变化 用 于 制造 明显 的 差异 效果 。 用 13 像素 的 字体 来 区 分 14 像素 的 
字体 ， 既 没 效果 也 不 可 取 。 

这 也 是 为 什么 组 成 MailChimp Logo ( 参见 第 5 章 和 第 6 章 ) 的 各 个 圆 之 间 有 着 固定 的 比例 
关系 ， 所 以 按照 一 定 比 例 选 择 设计 文字 大 小 是 一 种 可 取 的 做 法 。 比 如 ， 图 7-10 列 出 了 我 经 常 使 
用 的 字号 。 


图 7-10 
这 些 字号 之 间 存 在 着 
,12162128 37 50 6 1 3 : 4 的 比例 关系 


其 中 5 磅 字 和 7 磅 字 主要 是 用 来 打印 或 者 用 于 全 大 写 的 时 候 ， 而 且 我 是 拿 有 可 能 会 用 到 的 
最 小 号 (5 磅 ) 反复 地 除 以 0.75 ( 并 取 整 ) 来 设计 这 套 字体 大 小 的 - 因此 这 套 字体 中 各 个 字体 
的 大 小 之 间 存 在 着 固定 的 比例 关系 。 
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有 时 候 ， 把 其 中 的 某 个 字号 直接 变 成 小 一 号 或 者 大 一 号 并 不 会 达到 预期 的 区 分 效果 。 比 如 ， 
9 磅 字 和 12 磅 字 之 间 的 差异 就 非常 不 明显 。 如 图 7-11 演示 的 那样 ， 与 其 把 字号 变 大 ， 还 不 如 直 
接 将 9 磅 字号 的 标题 加 粗 ， 同 样 也 可 以 达到 层次 结构 变化 的 效果 。 


图 7-11 各 . 
天 这 请 字体 组。 出 Penyou say wen yeu Mhen you say tt 
或 者 更 明显 的 大 小 变 12 点 和 9 点 9 点 杠 体 和 正常 16 点 和 9 点 

化 等 视觉 因素 区 分 信 。“ We 

息 , 要 比 使 用 细微 尺 

寸 变化 更 有 成 效 


或 者 有 时 候 ， 跨 级 选择 字号 也 是 个 不 错 的 主意 。 比 如 ， 利 用 9 磅 字 和 16 磅 字 之 间 的 差异 ， 
产生 的 效果 立竿见影 。 今 天 对 字号 的 选择 已 在 什么 限制 ， 使 用 类 似 于 这 样 的 一 套 字号 ， 
不 仅 可 以 帮 你 简化 字体 选择 过 程 ， 而 且 还 能 提醒 你 改变 思路 ， 利 用 其 他 方式 来 区 分 信息 。 


3. 搭配 使 用 字体 粗细 和 字号 
既然 单独 改变 字体 粗细 或 者 字号 就 可 以 产生 明显 的 效果 ， 那 么 同时 改变 这 两 种 视觉 因素 的 










效果 应 该 更 加 显著 。 在 图 7-12 中 ， 我 对 标题 、 作 者 名 称 、 评 论 数 以 及 时 间 惟 进行 了 加 粗 。 使 用 
大 字体 、 全 大 还 有 加 粗 的 组 合 效果 ， 让 标题 在 设计 构成 中 占据 了 显 性 优势 。 由 于 标题 几 


乎 占 去 了 整个 设计 构成 的 左 半边 ( 阅读 的 起 始 位 置 )， 因 此 标题 的 重要 性 被 无 限 放大 了 。 


图 7 了 -12 





改变 字体 粗细 和 字号 MAY 31. 2004 - 8:16PM Moceterwous 

的 组 合 使 用 ， 可 以 扩 David kwr rw rmt rwma our 
aa Tts co THinG. 1 DONT REALLY 

大 其 视觉 重要 性 M Y HAvE AMY PARTICULAR INTENTIONS 


FOR THIS BLOG, EXCEPT TO 
RAMBLE (AND PERHAPS INFORM) 


ABOUT DESIGN WEB DESIGN AND 
THEUKE Mom>> 


3 COMMENTS 








在 空白 间隔 ( 列 之 间 的 间距 ) 的 另 一 侧 是 文章 分 类 、 正 文部 分 以 及 “More>>” 链 接 。 通 常 
在 Web 上 “大 喊 大 叫 "” 是 不 礼貌 的 ， 但 鉴于 正文 的 引言 部 分 很 短 ( 而 且 字母 间距 足够 大 )， 在 
这 种 情况 下 使 用 全 大 写字 符 也 是 可 取 的 





@ Web 上 “大 喊 大 叫 "， 是 指使 用 全 大 写字 母 书写 帖子 或 者 文章 。 来 源 有 两 种 说 法 : 一 是 指 全 大 写 的 内 容 比 正常 的 
内 容 更 占 空间 , 而 且 更 难以 阅读 , 让 阅读 的 人 抓 狂 ; 二 是 指 全 大 写 的 内 容 要 比 正常 的 内 容 更 扎根, 更 容易 引起 注意 , 
好 比 在 市 场 中 大 声 叫卖 吸引 顾客 一 样 。 
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7.2.3 颜色 


在 上 述 组 合 搭配 中 加 入 颜色 也 可 以 创造 出 层次 结构 的 视觉 特效 。 请 注意 在 图 7-13 中 ， 虽 然 
设计 作品 中 正文 和 标题 的 尺寸 相同 ， 但 标题 依然 显得 更 加 突出 重要 。 这 是 因为 加 粗 的 红色 标题 
要 比 灰色 的 正文 文本 更 显眼 。 

如 此 浓烈 的 红色 自然 要 比 浅 灰色 更 引 人 注 目 ， 而 且 还 会 与 纯 黑色 形成 强烈 的 反差 。 但 是 颜 
色 的 搭配 往往 更 为 复杂 微妙 (我 在 第 9 章 会 详细 谈论 颜色 搭配 的 话题 ) 





- 图 7-13 

Okay, I'm finally 尽管 浅 灰色 的 正文 与 
ee trying out this blog et 
My First Blog thing. | don't really 更 引 和 注目 


David Kad i 
avid Kadavy have any particular 


intentions for this 
blog, except to 
ramble (and perhaps 
inform) about design, 
web design and 
3commens the like... we 








| 





7.2.4 ”视觉 装饰 元 素 


即使 把 所 有 能 想到 的 字体 尺寸 、 粗细 、 颜色 的 各 种 搭配 都 用 上 , 如 此 设计 出 的 视觉 层次 结构 ， 
也 很 可 能 没有 大 多 数 实际 项 目 中 遇 到 的 那么 复杂 。 在 帮助 引导 用 户 方面 ， 图 像 资料 往往 是 必 不 
可 少 的 ， 而 在 某 些 情况 下 ， 图形 图 像 通常 是 交互 的 必 备 元 素 。 另 外 ， 借 助 复杂 的 布局 、 垂 直 和 
水 平 线条 、 色 块 ， 乃 至 渐变 ， 可 以 更 好 地 划分 页 面 ， 并 且 使 页 面 生动 有 趣 。 

在 图 7-14 中 ,我 使 用 了 尽 可 能 简单 的 视觉 装饰 元 素 。 该 设计 构成 是 在 第 一 个 设计 构成 ( 见 
图 7-3 ) 的 基础 上 简单 修改 而 来 ， 这 次 我 在 标题 下 方 添加 了 一 条 非常 细 的 水 平 线 。 

这 条 线 从 设计 作品 的 左边 缘 “ 洲 ”进来 ， 因 此 你 的 目光 会 很 自然 地 跟随 着 它 进 入 页 面 。 而 
标题 离 这 条 线 是 如 此 之 近 ， 以 至 于 你 肯定 会 第 一 个 注意 到 它 。 此 外 ， 我 还 将 标题 从 全 大 写 改 成 
了 大 小 写 混合 ,但 凭借 它 处 在 左上 和 角 的 位 置 ( 阅读 起 始 的 地 方 》 而且 还 非常 接近 水 平 线 条 ， 
此 标题 在 设计 构成 中 仍然 非常 突出 。 
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图 7-14 
水 平 线条 虽然 简单 、 My First Blog 四 Miscellaneous 
但 却 占据 战略 性 位 David Kadal ay 31, 2004 一 8:16pm 
置 ， 足 以 把 标题 突显 和 3 Comments 
出 来 


Okay, I'm finally trying out 
this blog thing, | don't really 
have any particular intentions 
for this blog, except to ramble 
(and perhaps inform) about 
design, web design and 

the like... 


More >> 











在 图 7-15 中 ,我 将 视觉 装饰 元 素 和 其 他 视觉 元 素 ( 比如 字体 粗细 .大 小 和 颜色 ) 一 起 混合 使 用 
而 且 在 这 里 我 用 到 的 唯一 视觉 装饰 元 素 是 一 条 加 粗 如 黑 的 水 平 线 。 这 条 线 从 设计 构成 的 左边 缘 
“ 洲 ” 进 来 ， 除 了 占有 显 性 优势 的 位 置 之 外 ， 仅 凭 其 加 粗 加 黑 的 自身 特征 就 可 以 自然 而 然 地 吸引 
你 的 目光 。 








图 7-15 
尽管 标题 文字 Davd Kadavy My First Blog weioneous 
小 于 正文 
， 黑 色 线条 照样 Moral 2004 -P10 Okay, I'm finally trying 





能 使 题 突显 出 来 out this blog thing, | dont 
really have any particular 
intentions for this blog, 
except to ramble (and 
perhaps inform) about 
design, web design and 


the like... we 3 Comments 











为 了 演示 视觉 装饰 元 素 对 层次 结构 的 影响 ,我 刻意 将 标题 文字 的 字号 设计 得 比 正文 要 小 。 
由 于 标题 采用 了 红色 加 粗 字体 ， 这 就 和 加 粗 加 黑 的 线条 形成 了 鲜明 对 比 ， 并 且 因 为 你 的 视线 会 
自然 地 落 在 线条 上 ， 所 以 贴近 它 的 标题 也 就 很 容易 被 注意 到 。 而 带 有 各 自 样式 的 作者 名 称 和 文 
章 分 类 ， 分 列 于 标题 的 两 侧 

鉴于 视觉 装饰 元 素 的 使 用 价值 ， 它 经 常 被 过 度 使 用 。 当 一 个 简单 布局 看 起 来 没 那么 “整洁 
清爽 ”时 ,很 多 新 手 设计 师 便 会 向 装饰 元 素 求助 。 但 是 , 就 像 任何 一 种 影响 视觉 差异 的 因素 一 样 ， 
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如 果 其 他 元 素 运用 得 当 ， 那么 应 当 有 节制 地 使 用 装饰 性 元 素 

表格 数据 是 过 度 使 用 装饰 元 素 最 常见 的 例子 - 大 多 数 人 认为 ,由 行 数据 和 列 数据 组 成 的 表格 ， 
应 该 需要 很 多 的 竖 直线 条 和 水 平 线条 。 其 背后 的 逻辑 是 出 于 对 表格 可 读 性 的 考虑 一 一 这 些 线条 
大 概 有 助 于 引导 目光 寻找 任何 特定 的 行 / 列 数 据 

图 7-16 给 出 了 一 个 典型 的 表格 数据 应 用 程序 。 表 格 中 的 每 一 项 数据 都 被 黑色 线条 隔离 在 属 
于 自己 的 小 格子 中 。 这 表面 上 有 助 于 引导 视线 ， 但 实际 上 它 只 是 为 设计 徒 增 了 杂乱 感 


图 7-16 
Top 5 Cities for Walking 数据 经 常 显示 在 像 
Boston, MA 1 这 样 的 表格 中 ， 被 多 





余 的 分 割 线 使 其 变 
得 杂乱 





Edward R. Tufte 在 Envisioning Informatrion 一 书 中 解释 到 ,试图 用 这 种 方式 来 进一步 区 分 信息 ， 
就 好 比 1 + 1=3。 这 人 句 话 的 含义 是 指 : 类 似 表格 中 的 数据 在 视觉 上 已 经 被 周转 委 区 域 区 分 开 
来 了 。 在 已 有 的 空白 区 域 中 插入 线 成 了 两 块 空白 区 域 和 一 :个 元 素 )， 它 们 的 作 
用 都 是 为 了 分 割 数据 。 所 以 ,一 加 一 就 等 于 三 了 。 更 粳 的 是 ,那些 完全 不 携带 任何 信息 的 元 素 ( 分 
制 线段 ) 会 使 整个 设计 变 得 杂乱 不 堪 

看 到 这 些 说 法 ， 你 可 能 会 争辩 道 : 表格 中 的 线条 是 为 了 引导 视线 。 但 是 ,我 在 第 6 章 中 讲 
解 设计 原则 中 的 方向 感 时 就 已 经 演示 过 ， 仅 是 排列 对 齐 元 素 在 引导 视线 方面 就 已 经 足够 强大 了 。 

图 7-17 给 出 了 相同 的 表格 数据 ,但 这 次 不 包含 任何 视觉 装饰 元 素 ,而 是 通过 将 表格 标题 加 粗 ， 
并 将 数字 类 型 的 数据 使 用 斜体 显示 。 而 且 标题 和 第 一 行 数据 之 间 空 白 区 域 要 比 数据 行距 的 空白 
区 域 要 宽 。 












To ities for Walkin ed 

Pse 9 利用 方向 感 原则 ， 凭 
漠 元 素 的 对 齐 排列 引 
导 视线 ， 可 以 使 表格 


Boston, MA 12.55%6 


Washington, D.C 9.97% eh 
A 数据 更 加 整洁 清爽 

San Francisco, CA 9.5996 

New York, NY 9.44% 

Philadelphia, PA 8.0596 


诚然 ， 这 个 表格 太 过 简单 ， 不 足以 说 明 问 题 。 有 时 候 数 据 较 多 的 表格 很 难 浏览 阅读 。 可 能 
你 会 惊讶 ， 无 论 是 在 设计 表格 数据 还 是 复杂 布局 时 ， 使 用 如 此 之 少 的 视觉 装饰 元 素 都 可 以 形成 


121 


122 黑客 与 设计 : 剖析 设计 之 美的 秘密 


比 想象 中 更 多 的 视觉 差异 。 比 如 . 图 7-18 给 出 的 还 是 同一 张 表格 ， 只 是 这 次 变 成 隔行 高 亮 显示 。 
当 表 格 数据 非常 多 时 ， 这 样 的 高 亮 效 果 对 保持 视线 不 串 行 非常 有 用 ， 而 且 能 让 表格 看 起 来 更 生 
动 有 趣 ( 但 这 一 条 并 不 是 使 用 高 亮 显 示 的 好 理由 ) 





图 7-18 Top 5 Cities for Walking 

有 时 高 亮 显示 数据 行 

可 以 协助 浏览 表格 ， Boston, MA 1255% 
一 些 其 他 装饰 元 素 


San Francisco, CA 959% 


Philadelphia, PA B05% 


需要 注意 的 是 ,该 表格 还 是 少量 使 用 了 分 割 线 。 高 亮 显示 本 身 就 是 很 好 的 分 隔 数据 行 的 标志 ， 
因此 不 需要 再 额外 用 分 割 线 标注 数据 行 的 边界 。 而 且 ， 高 亮 数据 行 的 边界 清晰 地 定义 了 表格 的 
外 围 ， 同 时 还 与 标识 数据 行 两 端的 水 平分 割 线 相 平 齐 。 谨 慎 使 用 视觉 装饰 元 素 设计 ， 既 能 使 表 
格 易 于 阅读 ， 又 让 它 看 起 来 美观 简洁 。 

之 所 以 使 用 表格 数据 做 例子 来 揭示 视觉 装饰 元 素 的 合理 应 用 ， 是 因为 相 比 在 项 目 中 可 能 会 
过 到 的 大 多 数 信 息 ， 表 格 数据 用 途 更 加 明确 。 在 设计 博客 网 站 、 社 交 应 用 程序 界面 或 者 移动 应 
用 程序 界面 时 ， 都 可 以 运用 相同 的 思路 。 最 重要 的 是 所 使 用 的 每 个 设计 元 素 ， 每 个 图 片 或 者 装 
饰 元 素 ， 以 及 每 块 空白 区 域 ( 不管 是 大 是 小 ) 都 要 经 过 深思 熟 虑 。 


7.3 设计 中 的 层次 结构 


现在 ,想必 你 已 经 明白 ， 塑 造 信 息 层次 结构 的 各 种 视觉 元 素 如 何 单独 使 用 以 及 彼此 组 合 ， 
这 为 理解 复杂 设计 背后 的 设计 思路 做 好 了 准备 。 

在 线 杂志 The Bygone Bureau ( http://bygonebureau.com ) 是 由 Sleepover 设计 公司 (http:// 
sleepoversf.com ) 设计 的 ， 它 有 效 地 巧妙 利用 了 层次 结构 因素 ( 见 图 7-19 )。 其 简洁 美观 的 设计 ， 
吸引 着 读者 沉浸 在 网 站 内 容 之 中 。 这 样 的 设计 对 网 站 很 有 意义 ， 因 为 他 们 的 网 站 使 命 就 是 “至 
力 于 传播 精锐 思想 和 精美 散文 "。 他 们 使 语言 更 具 美感 ， 而 且 网 站 的 设计 也 兑现 了 他 们 的 诺言 。 

The Bygone Bureau 在 设计 中 使 用 了 雅致 的 排版 格式 。 网 站 设计 中 的 字体 变化 非常 有 限 而 且 
不 明显 。 网 站 的 主 字体 用 的 是 Baskerville 字体 ， 一 种 非常 经 典 的 字体 ， 而 且 是 最 早出 现 的 过 渡 
体 之 一 (参见 第 3 章 )。Baskerville 字体 被 用 在 刊 头 、 文章 标题 ， 以 及 其 他 仅 有 少量 文字 的 地 方 。 

考虑 到 可 读 性 ， 网 站 正文 部 分 巧妙 地 切换 成 了 Georgia 字体 。Georgia 字体 和 Baskerville 字体 
非常 相似 ， 但 前 者 是 专门 针对 屏幕 显示 而 设计 的 ， 放 在 正文 中 更 容易 阅读 。 而 Baskerville 字体 则 
有 着 很 多 精致 的 样式 , 这 也 是 为 什么 它 非常 适用 于 标题 字体 的 原因 ( 更 多 字体 搭配 详 见 附录 B )。 
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The Bygone Bureau 








同时 使 用 两 种 不 同 的 
Web 中 , 由 于 放 在 正文 中 好 


多 信息 参见 








好 A 中 的 





由 于 Baskerville 字体 和 Georgia 字体 第 
用 的 空白 区 域 都 几经 其 酌 , 字体 尺 寸 和 粗细 变 


似 ， 所 以 为 了 





> 间 的 信息 ， 


:是 经 过 了 深思 熟 虑 。 请 注意 图 7-20 中 ,标题 












副标题 、 分 钾 


素 之 间 的 
是 寸 精 飞 





Most of what 


filling th 





又 如 图 7-21 ，Helvetica 字体 被 上 

又 分 开 来 

体 布局 为 读者 列 出 了 一 些 内 容 摘要 
设计 中 占据 了 显 性 优势 ， 然 而 它 依然 


类 和 发 表 日 期 ) 和 网 站 中 的 









又 黑 又 严肃 的 网 
的 简洁 设计 风格 


了 五 列 网 格 
1 其 他 部 分 
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图 7-21 三 
Helvetica 被 用 在 一 些 HUMOR 03.02.11 | 
文章 元 数据 上 ， 以 表 Whatever er 
示 这 些 信息 的 类 别 有 Buddy, We're 
所 不 同 Apocalypse Together 
| The zombie infection may 
| have taken over the wodld, | 
| butZachary Marinwil | 
stick by your side, whether 





最 新 的 文章 作为 最 重要 的 信息 突显 出 来 ， 它 在 布局 中 横 跨 两 列 网 格 ， 又 配 有 图 片 ， 而 且 位 
于 网 站 的 左上 方 ( 读者 开始 浏览 的 位 置 ) 其 他 的 摘要 都 只 占据 一 列 网 格 ， 并 且 文 章 分 类 以 颜色 
区 分 。 尽 管 我 必须 承认 ， 这 些 和 柔和 的 颜色 实际 上 并 不 易于 阅读 ， 但 即便 如 此 ， 这 种 典雅 的 排版 
还 是 令 人 赞叹 不 已 。 

各 文章 摘要 之 间 被 非常 细 、 非 常 淡 的 竖 线 和 水 平 线条 分 割 开 来 。 这 些 线条 也 许 并 不 是 必需 的 ， 
但 它们 的 干扰 程度 绝对 要 比 我 前 面 讲 到 的 表格 分 割 线 要 小 得 多 。 从 布局 中 划分 侧 边 栏 并 没有 使 
用 更 粗 更 深 的 线条 ， 而 是 风格 稍微 精细 的 双 线条 - 

在 The Bygone Bureau 的 文章 页 面 中 .布局 的 层次 结构 设计 得 非常 有 趣 。 刊 头 并 没有 像 一 般 
网 站 那样 约定 俗 成 地 放 在 页 面 的 左上 方 ， 而 是 把 文章 标题 放 在 了 页 面 最 好 的 位 置 上 。 这 像 是 在 
表达 他 们 注重 内 容 的 信念 ， 并 向 惯例 提出 质疑 : 网 站 名 称 真 的 总 是 比 内 容 更 重要 吗 ? 在 页 面 上 
重点 突出 这 些 信息 ， 还 需要 在 HTML 代码 中 把 文章 标题 也 放 在 网 站 名 称 的 上 面 ， 这 对 搜索 引擎 
优化 (SEO ) 很 有 实际 意义 。 

The Bygone Bureau 网 站 通过 使 用 微妙 的 层次 结构 变化 设计 出 雅致 的 排版 ， 同 时 表达 出 了 网 
站 背后 的 核心 理念 。 


7.4 小结 


现在 的 设计 需要 面 对 非 常 复杂 的 层次 关系 的 挑战 。 与 此 同时 ， 设 计 师 们 也 可 以 运用 许多 不 
同 的 因素 来 构建 层次 结构 。 理 解 每 种 视觉 因素 的 独立 运作 机 制 对 于 提升 设计 能 力 是 至 关 重 要 的 。 

口 当 你 再 看 到 优秀 的 设计 界面 甚至 是 海报 时 ， 一 定 要 仔细 观察 设计 师 是 如 何 建立 信息 层次 
结构 的 ， 以 及 使 用 了 哪些 视觉 因素 来 区 分 信息 之 间 的 差异 。 

口 当 你 再 次 进行 设计 创作 时 ， 试 着 先 剥 离 掉 所 有 多 余 的 视觉 装饰 元 素 ， 只 用 一 种 字体 ， 并 
从 相同 的 字号 开始 做 起 。 看 看 在 这 种 限制 下 ， 能 构建 出 什么 样 的 层次 结构 。 之 后 ， 再 试 
着 加 入 其 他 因素 ， 比 如 加 粗 字体 或 者 改变 尺寸 等 。 

口 根据 我 在 本 章 中 的 讲解 ， 尝 试 设计 一 组 不 同 规格 的 字号 。 你 可 以 直接 使 用 我 提供 的 字号 ， 
也 可 以 试 着 用 在 第 5 章 中 学 到 的 比例 关系 设计 一 套 自己 的 规格 。 一 旦 习惯 了 使 用 某 组 字 
号 ， 再 选择 合适 的 字号 就 显得 易如反掌 了 。 


Part 4 第 四 部 分 
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间 第 9 章 


色彩 理论 





颜色 是 设计 中 最 具 神秘 性 和 主观 性 的 元 素 之 一 。 在 颜色 的 欣赏 和 认 知 方面 ， 不 同文 化 之 间 
有 着 很 大 的 差异 ,并 且 也 因 人 而 异 。 事 实 上 , 这 就 是 颜色 主观 性 的 表现 。 在 本 章 中 我 们 将 会 探讨 ， 
我 们 人 类 和 其 他 物种 在 感知 颜色 方面 是 有 区 别 的 。 比 方 说 ， 有 些 颜 色 我 们 可 以 看 到 ， 而 狗 却 看 
不 到 。 还 有 些 颜 色 ， 动 物 ( 比如 鸟 类 ) 可 以 看 到 ， 而 我 们 则 不 能 。 此 外 ， 即 便 同 是 人 类 ， 对 颜 
色 的 感知 也 会 有 所 不 同 。 我 们 对 颜色 的 表达 方式 ( 比如 Web 主导 的 十 六 进 制 颜色 体系 ) 往往 也 
不 能 真正 完整 地 诠释 颜色 本 身 ， 并 且 颜 色 的 表现 因 介质 和 设备 的 不 同 也 不 同 。 这 些 情况 使 得 颜 
色 变 得 更 加 复杂 。 

然而 无论 对 颜色 的 感知 有 多 么 主观 ， 有 一 点 是 可 以 肯定 的 〈 虽然 不 是 必要 条 件 ) : 想 要 
清晰 地 运用 颜色 ， 了 解 颜 色 的 作用 原理 也 会 非常 有 帮助 。 例 如 ， 了 解 色 盲 的 存在 率 和 影响 ， 你 
就 知道 应 该 在 何 时 适合 使 用 颜色 以 外 的 沟通 方式 。 此 外 ， 明 白 不 同 设备 ( 比如 计算 机 屏幕 或 者 
打印 机 ) 的 色彩 重 现 机 制 ， 才 能 确保 用 户 看 到 的 颜色 符合 你 的 预期 。 最 后 ， 精 通 色彩 学 有 助 于 
你 更 加 快捷 高 效 地 完成 设计 ( 在 朋友 面前 大 显 身手 )， 这 样 你 就 可 以 有 时 间 去 着 手 项 目 其 他 方面 
的 工作 。 

在 本 章 中 ,我 将 介绍 颜色 的 作用 机 制 ， 从 而 帮助 你 抛 开 媒介 限制 ， 清 醒 地 使 用 颜色 。 我 将 
探究 颜色 的 本 质 ,讲解 人 体 视觉 系统 处 理 颜色 的 方式 ,以 及 如 何在 设计 中 考虑 色盲 的 影响 。 同 时 ， 
我 还 将 解释 为 什么 打印 在 名 片上 的 颜色 总 会 与 网 站 上 的 颜色 有 所 差异 ， 以 及 使 用 何 种 系统 才能 
尽量 避免 这 种 色差 。 最 后 ， 我 将 教 你 如 何 去 理 解 十 六 进 制 颜色 ， 以 便 节省 编码 时 间 ， 让 你 的 朋 
友 们 大 吃 一 惊 。 

难道 不 学 这 些 知识 ， 地 球 就 会 停 转 吗 ?当然 不 会 。 所 有 专业 设计 人 员 都 知道 这 些 知识 吗 ? 
也 不 可 能 ( 但 他 们 应 该 知道 )。 通 过 阅读 本 章 你 将 真正 认识 颜色 ， 并 为 第 9 章 打 好 基础 ， 在 第 9 
章 中 我 们 将 介绍 颜色 的 物理 特性 ， 以 及 我 们 的 身体 是 怎样 处 理 颜 色 ， 进 而 影响 我 们 对 设计 的 情 
感 反应 。 通 过 理解 颜色 ， 以 及 视觉 系统 处 理 颜色 的 方式 ， 你 能 更 好 地 理解 为 什么 Target 百货 使 
用 红色 吸引 顾客 购物 ， 而 大 通 银行 为 什么 又 采用 蓝 色 来 博取 客户 的 信任 感 。 运 用 相关 知识 ， 你 
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就 可 以 创建 吸引 访客 的 登录 页 面 以 及 用 户 友好 的 软件 界面 
8.1 色彩 是 什么 


什么 是 色彩 ? 这 听 起 来 几乎 就 是 一 个 哲学 问题 ， 和 思考 生命 的 意义 一 样 深奥 。 但 色彩 究竟 
是 什么 ? 你 所 感知 的 色彩 可 能 与 我 感知 到 的 有 所 不 同 。 稍 后 我 还 会 提 到 ， 你 感知 到 的 色彩 与 你 
的 宠物 狗 感知 到 的 色彩 或 许 也 不 尽 相同 。 令 人 惊奇 的 是 ， 市 中 心 那些 恼人 的 铝 子 都 能 感知 到 的 
色彩 ， 你 却 丝毫 感知 不 到 。 

也 许 有 人 会 说 ， 能 够 看 到 的 颜色 才能 称 之 为 色彩 ， 但 其 实 我 们 所 看 到 的 色彩 就 是 简单 的 电 
磁 辐 射 -在 图 8-1 中 可 以 看 到 ,我 们 感知 为 色彩 的 电磁 辐射 ,与 在 微波 炉 中 做 爆 米 花 时 产生 的 微波 、 
FM 收音 机 接收 的 信号 、 照 射 骨 折 锁 骨 的 X 射线 ， 以 及 ( 使 用 红外 遥控 器 ) 电视 调 台 信号 所 发 
出 的 电磁 辐射 是 一 样 的 


一 频率 逐 增 (7) 图 8-1 
- 人 Fw va ”人 类 可 见 的 色彩 属于 
No 一 个 特定 范围 的 电磁 
辐射 
Sakurambo ( http:// 
commons.wikimedia.org/ 
wiki/User:Sakurambo ) 





wo Om 
该 长 夷 增 (X%) 一 





pm 可 风光 讲 


00 00 0 
波长 (X%) 素 渐 增加 (以 纳米 计 ) 一 


人 类 可 见 的 电磁 辐射 范围 ， 通 常 被 称 为 “可 见 光谱 "。 它 们 的 波长 范围 大 约 从 390 纳米 到 
750 纳米 ， 周 期 在 400 太 赫 效 到 790 太 赫 兹 

大 约 在 18 世纪 初期 ， 牛 顿 发 现 白光 通过 三 棱镜 折射 后 可 形成 带 色彩 的 可 见 光谱 。 牛顿 又 进 
行 了 如 下 的 实验 : 将 这 部 分 光谱 再 通过 另 一 个 棱镜 ， 光 谱 的 色彩 并 没有 再 次 发 生 改 变 。 让 这 部 
分 光谱 再 透 过 一 个 透镜 就 又 重新 聚合 为 了 白光 。 通 过 实验 他 证 明了 这 部 分 光谱 确实 是 由 白色 光 
分 离 出 来 的 ， 而 不 是 由 棱镜 产生 的 色彩 。 在 牛顿 的 实验 之 前 ， 科 学 家 们 通常 认为 白光 是 无 色 的 。 

尽管 光谱 中 各 色彩 之 间 并 没有 明确 的 分 界线 ， 但 牛顿 还 是 将 色彩 进行 了 分 类 ， 并 排列 成 圆 
形 的 色 盘 。 受 古 希 腊 人 关于 色彩 与 音符 (一 个 8 度 音阶 中 有 7 个 音符 ) 以 及 一 周 的 天 数 之 间 存 
在 关联 的 启发 ， 牛 顿 将 色 盘 分 割 成 7 种 色彩 。 图 8-2 就 是 牛顿 的 色 盘 ， 按 照 D 调 的 多 利安 调式 
排列 ， 每 个 音符 分 别 对 应 不 同 的 色彩 。 
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8-2 

牛顿 依据 音符 将 可 见 
光谱 的 各 种 色彩 排列 
在 圆 盘 上 





8.2 眼睛 的 骗局 


只 有 在 真空 中 ， 才 能 将 白光 理想 地 分 解 成 带 颜 色 的 可 见 光 谱 。 在 现实 世界 中 有 太 多 的 影响 
因素 ， 所 以 人 眼看 到 的 光 就 不 是 那么 纯净 了 。 但 你 的 眼睛 ( 或 者 更 准确 地 说 ， 你 的 视觉 系统 ) 
会 用 一 些 骗局 来 保持 视觉 世界 的 稳定 性 


8.2.1 同色 异 谱 


虽然 大 家 可 能 已 经 对 “彩虹 色谱 ”非常 熟悉 ,但 是 在 日 常生 活 中 ， 你 几乎 见 不 到 这 么 纯净 
的 颜色 。 现 实 世 界 中 你 所 观察 到 的 颜色 实际 上 是 包含 不 同 频率 的 光谱 。 你 的 眼睛 和 大 脑 将 某 一 
特定 光谱 估算 成 某 种 颜色 ， 这 就 是 你 能 看 到 颜色 的 原理 

虽然 一 个 光谱 不 同 于 另 一 个 光谱 ， 但 它们 可 能 会 表现 为 相同 的 颜色 。 这 种 现象 被 称 为 “ 同 
色 异 谱 "， 它 是 我 们 在 各 种 媒介 中 估计 和 重 现 色彩 的 基础 。 红 色 轿 车 照片 的 光谱 ， 与 阳光 下 真实 
看 到 的 同一 辆 车 的 光谱 可 能 有 所 不 同 ， 但 由 于 同色 异 谱 的 原因 ， 这 两 个 颜色 看 起 来 基本 一 致 。 

所 以 ， 当 你 确信 看 到 了 “彩虹 色谱 ”中 的 某 种 纯色 时 ， 那 是 由 于 视觉 系统 解析 的 结果 。 视 
觉 系统 感知 到 光谱 的 主 色 调 ， 并 让 你 感受 到 对 应 的 颜色 。 在 本 书 中 你 所 看 到 的 颜色 ， 并 不 是 光 
谱 中 的 纯色 。 相 反 ， 它 们 是 打印 在 纸 上 的 墨 点 的 综合 效果 。 甚 至 房间 里 的 灯光 ， 也 会 影响 进 和 
你 眼睛 的 光谱 波长 。 但 你 的 视觉 系统 几乎 都 会 将 它们 当 作 纯色 来 识别 。 


8.2.2 色彩 恒 常 性 


色彩 恒 常 性 ， 是 视觉 系统 感知 颜色 的 另 一 条 捷径 。 色 彩 恒 常 性 是 这 样 一 种 现象 : 两 个 相同 
颜色 的 实物 ， 即 使 一 个 处 在 光线 下 ， 另 一 个 单 在 阴影 中 ， 你 的 眼睛 也 会 认为 它们 是 相同 的 颜色 。 
例如 请 注意 图 8-3， 尽 管 热气 球 有 的 部 分 处 在 阳光 直射 中 ， 有 的 部 分 处 在 阴影 中 ， 但 它们 的 颜色 
明显 是 相同 的 。 












注意 看 图 8-4 所 示 的 跳棋 盘 。 位 
上 具有 完全 相同 的 颜色 。 但 是 由 于 色 


柱状 物 阴影 
恒 常 性 ， 使 得 


这 种 现象 会 引起 一 些 有 趣 的 
* 标 有 B 的 方 格 ， 与 标 有 A 的 方 格 ， 
] 的 颜色 看 起 来 非常 不 同 






由 于 色彩 恒 常 性 ， 热 
气球 处 在 阴 崩 
分 与 位 于 阳光 下 的 
部 分 颜色 相同 Mike 
Willis 摄 (htpywww 








flickr.com/people 
mpwillis/ ) 





由 于 色彩 恒 常 性 ， 标 
有 B 的 方 格 颜色 看 起 
来 要 比 标 有 A 的 方 
格 颜色 浅 ， 但 全 
它们 的 颜色 是 相同 的 
Edward H. Adelson 
( http://persci.mit.edu 








people/adelson ) 








你 盯 着 图 8-5 中 的 红色 圆 保持 10 秒 、 然 后 再 看 旁 
色 文 是 因为 眼球 中 的 神经 末梢 已 经 习惯 
末梢 仍 习惯 于 在 视野 中 看 到 红色 ， 所 


像 是 另 一 种 有 趣 的 视觉 现象 
边 的 灰色 圆圈 ， 你 在 它 上 面 看 到 
I 色 的 视觉 刺激 。 当 你 的 视线 再 看 到 一 片 空白 时 ， 神 
以 视觉 上 相反 的 颜色 信号 就 被 发 送 到 大 脑 中 


残留 吕 
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图 8-5 

紧 盯 红色 圆 10 秒 , 
然后 再 看 右 侧 灰 色 圆 
团 ， 将 产生 一 个 蓝 绿 
色 的 重 影 





残 影 现 象 与 颜色 的 互补 或 者 对 抗 概念 有 关 ( 参见 第 9 章 )。 那 些 遵循 流行 色彩 理论 模型 的 艺 
术 家 们 认为 ， 某 些 特定 的 颜色 配对 ， 如 红色 和 绿色 ， 会 形成 鲜明 对 照 ， 并 且 在 它们 交汇 的 地 方 
产生 振动 感 。 

焚 高 等 印象 派 画家 就 擅长 运用 对 比 色 的 这 种 现象 ， 在 画作 中 体现 出 振动 感 和 运动 感 。 林 高 
在 1888 年 8 月 写 给 他 弟弟 西 奥 的 信 中 这 样 说 到 


要 和 夸大 头发 的 柔 亮 效果 ， 我 会 选择 橙色 调 ， 用 铬 黄 和 浅黄 色 等 颜色 。 然 后 ， 再 设 
法 用 最 饱满 、 最 强烈 的 蓝 色 做 一 个 简单 背景 。 通 过 鲜亮 的 头 部 与 饱满 的 蓝 色 背景 这 样 
的 对 比 组 合 ， 就 会 得 到 一 个 神奇 效果 ， 就 像 一 颗 明星 闪 武 在 竺 蓝 的 天 空 深 处 


8.3 视觉 系统 的 工作 机 制 


上 面 提 到 的 这 些 现象 都 十 分 有 趣 ， 但 它们 在 视觉 系统 里 究竟 是 怎样 产生 的 呢 ? 为 了 对 我 们 
感知 颜色 的 方式 有 一 个 真正 的 理解 ， 并 学 习 一 些 色彩 理论 基础 ( 将 在 下 一 章 中 介绍 )， 首先 ， 我 
们 需要 了 解 人 的 视觉 系统 是 如 何 工作 的 。 


8.3.1 视 锥 细胞 


在 我 们 的 视网膜 上 存在 着 数 以 百 万 计 的 、 被 称 为 视 锥 细胞 的 感光 器 ( 形成 残留 影像 的 地 方 )， 
它们 负责 处 理 可 见 光谱 中 的 颜色 。 其 他 的 感光 器 一 一 视 杆 细胞 ， 则 在 黑暗 条 件 下 比较 敏感 ， 几 
平 不 参与 对 于 颜色 的 处 理 。 

我 们 的 眼睛 有 3 类 视 锥 细胞 ， 每 种 类 型 都 有 各 自 的 可 见 光谱 处 理 范围 ( 尽管 有 很 大 部 分 的 
重合 )。 图 8-6 给 出 了 这 3 种 不 同类 型 视 锥 细胞 的 颜色 响应 图 。 这 3 种 视 锥 细胞 分 别 是 短波 (S 
或 蓝 色 ) 视 锥 细胞 、 中 波 ( M 或 绿色 ) 视 锥 细胞 与 长 波 (L 或 红色 ) 视 锥 细胞 ， 但 当 你 观察 这 
些 视 锥 细胞 与 图 中 颜色 的 对 应 关系 时 ， 你 会 发 现 上 述 各 类 视 锥 细胞 所 对 应 的 主要 颜色 并 不 十 分 
准确 。 实 际 上 ，S 视 锥 细胞 对 紫罗兰 色光 最 为 敏感 ，M 视 锥 细胞 对 绿色 光 最 为 丝 感 ， 而 L 视 锥 
细胞 则 对 黄 绿 色光 最 为 敏感 。 
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人 类 视网膜 上 的 各 种 

细胞 ， 仅 处 理 其 

分 的 可 见 光 

谱 ， 但 这 些 部 分 会 有 
此 重合 









归 一 化 视 包 





/人 


00 50 650 











这 些 视 锥 细胞 响应 的 组 合 ， 
光 器 的 动物 ， 比 如 鸟 类 ， 更 宽泛 的 色彩 
细胞 ， 能 识别 大 百 亿 种 颜色 这 种 敏锐 的 视 
到 案 ( 用 于 求偶 )、 发 现 反射 着 紫外 线 的 某 种 食物 





一 千 万 种 颜色 ， 但 是 某 些 拥有 特殊 紫外 
站 。 比如 鸟 子 有 着 5 种 不 同类 型 的 视 锥 
能 区 分 彼此 羽毛 上 的 紫外 线 
蕴 物 留 下 的 尿 液 或 者 类 便 痕 迹 ( 也 反射 


分 辩 出 




















光 ) 
8.3.2 ”三 基色 原理 和 对 抗 色觉 理论 
人 类 三 种 视 锥 细胞 的 不 同 响应 曲线 的 排列 方式 与 三 基色 原理 一 致 基色 原理 是 假设 我 们 






所 感知 
科学 
通路 组 成 的 
的 一 种 颜色 
事实 证 明 ， 三 基 
原理 和 我 们 的 视 锥 名 
抗 色觉 理论 则 与 接 
颜色 被 视 
神经 节 细胞 
息 的 神经 节 细 
第 一 种 处 理 
细胞 的 信息 。 按 
另 一 胞 则 三 
锥 细胞 的 信息 ， 所 以 基本 上 
当然 ， 以 上 只 是 十 分 简单 外 
asmartbear.com ) 上 的 一 篇 类 似 说明 


是 由 三 种 不 同 的 感光 细胞 组 成 的 
们 曾 认 为 三 基色 原理 与 对 抗 色觉 理论 不 兼容 。 后 者 提出 我 们 的 视觉 是 由 三 组 对 抗 的 
红 对 绿 ， 蓝 对 黄 ， 以 及 黑 对 白 。 对 抗 色 觉 理 论 认 为 人 类 一 次 只 能 看 到 每 个 通路 中 





















明理 和 对 抗 色 色觉 理论 都 符合 我 们 今天 对 颜 
每 种 视 锥 细胞 类 型 负责 感知 

颜色 的 方式 一 致 

， 信 息 ( 在 双 极 细胞 那里 做 短暂 停留 之 后 ) 被 传递 给 


知 的 认识 。 自然 ， 三 基色 
1 自己 范围 内 的 颜色 。 而 对 






视觉 系 
总 奈 二 所 禄 信 细胞 处 理 
用 对 抗 的 方式 处 理 这 些 来 自视 锥 细胞 的 信息 。 负 责 处理 颜 









类 型 
申 经 节 细胞 ， 以 对 抗 的 方式 处 理 来 自 I L Nh M (或 者 说 红色 用 

处 理 一 种 信和 处 理 成 偏 
合 信号 ， 用 对 抗 的 方式 处 理 来 自 s 视 






色 ) ot 














自 博客 A Smart Bear ( http://blog 
了 视觉 的 工作 方式 
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由 于 这 种 对 抗 性 ， 人 类 无 法 看 到 类 似 绿 红 或 者 蓝 黄 的 颜色 。 虽 然 在 小 学 我 们 学 ii 
色 混 合 会 产生 绿色 ,但 一 些 研究 人 员 相信 世界 上 有 着 能 够 同时 呈现 黄色 和 蓝 色 旬 
我 们 知道 红色 颜料 和 绿色 颜料 混在 一 起 会 变 成 棕色 ， 而 在 显示 器 中 ， 红 光 和 绿 光 在 
生 黄 光 ， 但 一 些 研究 人 员 也 相信 存在 同时 感知 到 红色 和 绿色 的 可 能 


图 8-7 光 感 受 器 ( 视 锥 细胞 ) 
人 类 的 视觉 系统 将 颜 

色 信 号 从 3 种 不 同 的 

感光 器 ， 发 送 型 
抗 方式 处 理 颜 
但 胞 上 
组 合 以 及 黄 蓝 色 组 合 
是 不 能 同时 被 感知 的 









色 和 蓝 
色 。 同 理 ， 
-起 则 会 产 






神经 节 细胞 





研究 人 员 Hewitt Crane 和 Thomas Piantanida 设计 了 一 种 据说 通过 混合 对 每 只 眼睛 的 刺激 ， 
可 以 让 参 上 abn rs 色 和 黄 蓝 色 的 设备 观察 图 8-8 H 如 果 试 着 对 眼 ， 让 两 个 白 
色 方块 重合 起 来 那么 你 就 有 可 能 像 那 些 参与 者 到 黄 蓝 色 


8.3.3” 主 波长 组 合 和 色 轮 
请 注意 ， 在 可 见 光谱 中 并 没有 紫色 ( 不 要 和 可 见 光 谱 开 
在 纯净 的 紫色 “ 主 波长 "。 相 反 ， 我 们 所 感知 到 的 紫色 是 多 
种 可 以 被 同时 感知 《 渤 是 入 经 节 交 朋 朱 理 
虽然 可 见 光 谱 是 性 方式 存在 的 ， 
而 且 如 图 8-9 所 示 ， 将 紫色 放 在 最 短 让 
合 两 者 之 间 的 差别 





图 8-8 

如 果 你 对 眼 让 白色 方 
块 重合 ， 那 么 你 可 能 
会 感觉 到 理论 上 的 黄 


会 


蓝 色 










的 紫罗兰 色 混 淆 了 )。 也 就 是 不 存 
对 色 的 组 合 ， 比 如 红色 和 蓝 色 这 两 
自视 锥 细胞 刺激 的 方式 造成 的 ) 

艺术 家 色 轮 则 是 以 圆 环 的 方式 组 织 颜 色 的 ， 
) 和 最 长 波长 颜色 ( 红色 ) 之 间 来 弥 
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8-9 
流行 艺术 家 的 色 轮 中 
的 紫色 ,是 以 红色 波 
长 和 蓝 色 波长 的 光线 
组 合 形式 存在 


这 个 色 轮 在 艺术 和 设计 的 色彩 理论 ( 我 将 在 第 9 章 介绍 这 个 话题 ) 中 非常 重要 。 
8.3.4 ”色盲 


我 们 当中 的 一 些 人 有 着 不 同 程度 的 色盲 ， 他 们 无 法 区 分 一 些 特定 的 颜色 。 最 常见 的 色盲 是 
红 绿 色盲 几乎 每 十 位 男性 当中 就 有 一 位 红 绿 色盲 患者 ( 因为 视 锥 细胞 的 基因 位 于 X 染色 体 上 ， 
女性 只 有 两 条 X 染色 体 都 缺少 感 红 ( 绿 ) 光 的 视 锥 细胞 才 表现 为 红 ( 绿 ) 色盲 ， 所 以 女性 很 少 
有 色盲 患者 ) 

红 绿 色盲 有 几 种 不 同 的 类 型 ,但 通常 都 是 由 二 色 性 视觉 引起 的 。 简 单 来 说 , 二 色 性 视觉 是 指 ， 
由 于 我 们 眼中 的 某 一 种 视 锥 细胞 (S、M 或 者 是 型 ) 存在 缺失 或 者 功能 障碍 ， 只 剩 下 两 种 视 
锥 细胞 来 处 理 颜 色 (S 型 视 锥 细胞 受 损 会 导致 难以 区 分 黄色 、 绿 色 和 蓝 色 )。 其 实 (除了 人 类 之 
外 的 ) 大 多 数 的 哺乳 动物 都 是 二 色 性 视觉 。 所 以 ， 虽 然 狗 可 以 分 辨 一 些 颜色 ( 主要 是 黄色 、 蓝 
色 和 紫罗兰 色 )， 但 想 让 它 在 绿 草坪 中 找到 红 球 可 能 会 非常 困难 。 

鉴于 色盲 如 此 普遍 ， 所 以 在 设计 时 ， 值 得 将 其 考虑 在 内 。 从 文化 的 角度 来 说 ， 红 色 和 绿色 
通常 被 用 于 标识 相反 含义 的 信息 比如 交通 信号 灯 中 的 停止 和 通行 信号 )。 在 设计 中 考虑 色盲 因 
素 , 并 不 意味 着 要 完全 避免 使 用 这 些 带 有 强烈 文化 含义 的 颜色 ( 我 会 在 第 9 章 中 讨论 这 个 话题 )， 
而 是 应 该 试 着 用 差异 化 的 图 形 来 传递 信息 。 很 多 色盲 患者 可 以 根据 信号 灯 的 固定 位 置 顺序 看 懂 
交通 信和 号。 当然 ， 如 果 这 些 信号 灯 能 设计 成 不 相同 的 形状 ， 就 更 容易 辨认 了 。 请 注意 图 8-10 中 
的 图 标 ， 除 了 使 用 颜色 之 外 ， 还 可 以 借助 形状 传递 信息 


图 8-10 
较 容 易 理解 ， 因 为 它们 不 仅 颜色 
不 同 ， 而 且 形 状 也 不 同 
有 助 于 兼顾 常见 色盲 类 型 的 设计 工具 有 很 多 。 比 如 ,在 Photoshop 中 有 色盲 模拟 校准 设置 
功能 。 通 过 快速 搜索 ， 你 可 以 找到 一 些 能 从 色盲 用 户 的 角度 来 预览 网 站 的 工具 ， 或 者 一 些 能 模 


拟 色 育 用 户 视觉 效果 的 调 色 板 。 
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对 色盲 用 户 的 支持 程度 ， 取 决 于 项 目的 需求 和 用 例 。 检 查 色盲 的 不 兼容 性 在 设计 信和 
时 特别 有 用 ， 如 图 8-11 所 示 


图 8-11 

对 设计 进行 常见 色 育 
类 型 的 测试 ， 有 助 于 
图 形 信息 的 清晰 表达 


色 饼 图 色 宵 忠 者 眼中 看 到 中 者 所 












8.4 定义 颜色 


我 之 前 所 说 的 纯色 就 是 所 谓 的 色相 ， 当 然 除 此 之 外 ， 现 实 中 人 们 还 可 以 看 到 很 多 种 其 他 
的 色彩 。 数 百年 来 ， 一 直 在 试图 和 定义 a 见 的 上 千 万 种 色 : 

由 Philipp Otto Runge 设计 的 Farbenkugel 色彩 球 是 试图 展示 所 有 可 见 色 蒜 
( 见 图 8-12 ) 











9 早期 尝试 之 





Philipp Otto Runge 试 图 
在 立体 的 Farbenkugel 
圆 球 中 表示 出 所 有 的 
可 见 色彩 
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最 终 , 科学 家 们 发 现 完美 的 球体 并 不 能 诠释 所 有 可 见 的 色彩 。 实 际 上 ， 人 们 感知 各 种 色彩 
之 间 差 异 的 能 力 受 到 非常 多 细微 因素 的 影响 。 对 于 某 些 色相 ， 我 们 可 以 在 较 宽 的 范围 值 内 ( 从 
亮 到 暗 ) 感知 到 它 。 随 着 世界 的 标准 化 进程 ， 色 彩 的 可 见 范围 需要 用 数值 表示 出 来 ， 这 对 科学 
研究 来 说 非常 有 帮助 ( 比如 用 数值 描述 土壤 的 色彩 )。 当 然 ， 用 计算 机 展示 色彩 将 非常 关键 。 


8.4.1 ” 蒙 赛 尔 色 卡 


第 一 个 真正 成 功 的 可 见 色 彩 汇编 出 自 Albert H. Munsell 之 手 ， 被 称 为 蒙 赛 尔 色彩 系统 ( 见 
图 8-13 ), 它 根据 色彩 的 色相 ( 红 、 蓝 及 其 他 色彩 )、 明度 ( 明暗 的 程度 )， 以 及 浓度 ( 色彩 强度 ， 
比方 说 彩色 蜡笔 画 出 的 颜色 就 属于 低 色 度 ) 来 定义 色彩 。 因 为 蒙 赛 尔 系统 的 建立 基于 人 类 的 感 
知 灵 敏 度 ， 因 此 它 在 外 观 上 并 不 像 Farbenkugel 球 那 么 整齐 划一 ( 见 图 8-14 )。 完 成 于 20 世纪 初 
的 蒙 赛 尔 系统 至 今 仍 在 应 用 


芝 赛 尔 色彩 系统 








Jacob Rus ( http:/en. 


wikipedia.org/wiki/ 
User:Jacobolus ) 





蒙 赛 尔 系统 的 成 功 在 于 其 致力 于 保持 感知 度 的 一 致 性 。 蒙 赛 尔 系统 对 色彩 的 编码 建立 在 对 
人 类 受 试 者 色彩 反应 的 科学 计量 之 上 。 因 此 在 蒙 赛 尔 系统 中 ,不 同色 相 但 相同 明度 的 两 种 色彩 ， 
人 类 所 感知 到 的 亮度 是 相同 的 
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图 8-14 

莹 赛 尔 系统 为 了 保持 
感知 度 的 一 致 性 ,一 
些 色彩 有 着 更 宽泛 的 
明度 和 浓度 。 色 彩 空 
间 自 身 在 形状 上 并 不 
整齐 划一 

SharkD ( http:/commons. 
wikimedia.org/wiki/ 
User:SharkD ) 








8.4.2 色相 、 饱 和 度 和 亮度 


HSB ( 有 时 也 称 为 HSV ) 色彩 模型 在 概念 上 与 蒙 赛 尔 色 彩 系统 类 似 ， 因 为 HSB 也 将 色彩 范 
围 形变 成 基 条 轴线 ( 色相 、 饱 和 度 和 亮度 ) 的 圆柱 体 ， 只 不 过 HSB 将 这 些 值 分 解 到 相同 的 
范围 之 内 。 在 蒙 赛 尔 色彩 系统 中 ， 这 些 色彩 的 取 值 范围 各 有 不 同 ( 比如 .黄色 在 浓度 或 者 强度 
方面 比 淡 紫 色 有 着 更 多 的 变化 )， 而 在 HSB 模型 中 无 论 是 什么 色相 ， 它 们 的 饱和 度 ( 类 似 于 蒙 
赛 尔 色彩 系统 中 的 浓度 ) 范围 都 是 相同 的 

鉴于 HSB 模型 对 色彩 可 见 范围 的 调整 ， 如 果 
种 色彩 ， 从 鲜红 色 开 始 ， 如 果 将 饱和 度 滑动 条 滑 至 0， 你 会 得 到 纯 白 色 。 根 据 HSB 色彩 模型 ， 
白色 和 鲜红 色 有 着 相同 的 ， 尽 管 白色 的 实际 感 要 略 高 于 红色 

当 使 用 HSB 色彩 模型 设计 用 色彩 代表 数据 的 图 形 时 。 会 出 现 一 些 问 题 ， 但 我 稍 后 会 说 明 ， 
在 挑选 预想 的 色彩 时 ，HSB ( 以 及 其 他 类 似 的 色彩 模型 ) 仍然 是 最 简单 有 效 的 模型 之 一 
图 8-15 
在 HSB 选择 器 中 滑 
动 饱 和 度 条 ， 尽 管 色 
彩 的 亮度 值 不 会 有 任 
何 变化 , 但 还 是 会 改 
变 感知 亮度 。 这 种 对 
色彩 的 描述 在 感知 上 
并 不 准确 
8.4.3 Lab 色彩 模型 


当前 最 流行 的 色彩 空间 要 数 基于 蒙 赛 尔 色彩 系统 的 CIELAB 色彩 模型 ， 它 在 一 些 图 形 软件 
( 比如 Photoshop ) 中 被 称 为 “Lab 模式 ”( 代表 亮度 ，a 和 b 各 代表 一 组 对 立 的 色彩 维度 )。 当 








你 在 某 个 HSB 选择 器 ( 见 图 8-15 ) 中 挑选 一 













充 民 
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你 在 Lab 色彩 选择 器 上 调整 a 滑动 条 时 ， 本 质 上 是 在 选择 让 色彩 偏 红 一 些 还 是 偏 绿 一 些 。 而 调 
整 b 滑动 条 ， 则 是 在 选择 让 色彩 偏 蓝 一 些 还 是 偏 黄 一 些 。 由 于 工 滑动 条 保持 在 同一 个 位 置 ， 所 
以 色彩 的 整体 亮度 会 保持 不 变 。 

虽然 有 时 能 够 保持 感知 亮度 恒定 比较 方便 ， 但 在 像 Lab 这 种 模式 的 色彩 选择 器 中 选择 想 要 的 
色彩 时 就 变 得 比较 困难 。 如 图 8-16 所 示 ， 三 个 滑动 条 都 处 在 最 小 值 的 初始 状态 ， 对 应 的 色彩 为 饱 
和 的 蓝 色 。 如 果 要 生成 紫罗兰 色 ， 必 须 将 a 滑动 条 调 至 最 大 处 ( 其实 就 是 让 色彩 更 红 一 些 )。 这样 
得 到 的 色彩 稍微 接近 于 紫罗兰 色 , 但 是 如 果 将 工 滑 动 条 向 右 稍微 滑动 一 些 , 就 得 到 所 需 的 色彩 了 。 





图 8-16 

想 在 Lab 色彩 滑动 
条 中 精确 定位 某 种 色 
彩 ， 可 不 是 一 件 直观 
的 事 





相 比 而 言 ， 在 HSB 色彩 选择 器 ( 见 图 8-17 ) 中 选择 想 要 的 色彩 就 更 为 直观 了 。 可 以 先 滑动 
为 紫罗兰 色相 ， 然 后 再 调整 S 和 B 滑动 条 得 到 想 要 的 色彩 。 如 果 切 换 为 Web 色 
彩 选 择 器 模式 ， 还 可 以 得 到 色彩 的 十 六 进 制 值 。( 顺 便 说 一 下 ， 在 Web 色彩 选择 器 中 选择 色彩 
和 从 Lab 选择 器 中 选择 色彩 一 样 很 不 直观 ,) 








图 8-17 

在 HSB 色彩 滑动 条 
中 定位 某 种 色彩 非常 
直观 。 你 可 以 先 选择 
想 要 的 色相 ， 然 后 再 
做 相应 的 调整 





8.5 ”颜色 模型 和 数据 驱动 图 形 


在 以 编码 的 方式 设计 数据 驱动 的 图 形 时 ， 颜 色 模型 失真 的 问题 格外 重要 。 比 如 , 在 HSB 色 
彩 空间 中 编写 的 颜色 ， 可 能 会 导致 最 终 呈 现 的 图 形 无 法 正确 地 表示 数据 的 含义 。 


8.5.1 颜色 和 定性 数据 


在 设计 饼 图 或 者 其 他 区 分 定性 数据 ( 所 有 的 类 别 之 间 没 有 优 劣 好 坏 之 分 ) 的 图 形 时 ， 通 常 
的 做 法 是 为 不 同 的 数据 类 别 选择 不 同 的 颜色 。 

但 是 在 大 多 数 的 颜色 选择 器 ( 例如 HSB ) 中 选择 的 颜色 ,通常 在 亮度 感知 方面 存在 着 差异 ， 
这 使 得 某 种 类 别 的 数据 好 像 要 优 于 另 一 种 数据 。 从 图 8-18 中 可 以 看 到 ,从 Lab 空间 中 选择 的 颜 
色 有 着 完全 相同 的 亮度 ， 这 样 各 个 数据 类 别 之 间 的 视觉 比重 彼此 一 致 ， 因 此 就 不 会 出 现 哪个 类 
别 看 起 来 比 其 他 类 别 更 重要 的 情况 
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图 8-18 

从 HSB 图 表 中 选取 
颜色 可 能 会 导致 亮度 
感知 上 的 差异 ， 进 而 
可 能 误导 定性 数据 的 
显示 


HSB 颜 色 选 择 器 取 色 Lab 顿 色 选择 器 取 色 


正如 前 面 提 到 过 的 ， 使 用 基于 滑 块 的 颜色 选择 器 来 选择 Lab 颜色 是 比较 困难 的 ， 但 有 一 些 
Lab 颜色 选择 器 ， 比 如 Adobe Photoshop 中 的 选择 器 ( 见 图 8-19 )， 允 许 你 先 选择 一 个 亮度 ， 然 
后 再 选择 这 一 亮度 下 的 所 有 颜色 。 











图 8-19 

Adobe Photoshop 的 Lab 
颜色 选择 器 可 以 在 固 
定 亮度 下 选择 颜色 








8.5.2 ”颜色 和 定量 数据 


当选 择 表达 定量 数据 的 调 色 板 时 ， 你 需要 了 解 的 是 ， 在 不 同 的 颜色 模型 中 ， 不同 的 色彩 变 
化 会 产生 不 同 的 感知 效果 。 在 流行 的 间 中 使 用 颜色 数据 表示 法 生成 的 颜色 ， 不 一 定 总 能 
转化 为 等 效 的 感知 差异 

以 如 图 8-20 所 示 的 瑞典 各 省 人 口 密度 分 布 图 为 例 。 图 中 的 颜色 是 在 保持 饱和 度 和 亮度 不 变 
的 前 提 下 ， 以 编码 的 方式 在 HSL 调 色 板 ( 类 似 于 HSB ) 上 对 不 同色 调 的 颜色 进行 选择 

在 设计 数据 驱动 图 形 时 ,这 是 一 种 很 常见 的 错误 。 生 成 的 图 形 通 过 从 黄 到 绿 再 到 红 的 色调 
变化 ,来 区 分 从 低 到 高 的 数据 。 由 于 调 色 板 太 过 刺眼 ,以 至 于 难以 长 时 间 盯 着 它 仔细 研究 。 另 外 ， 
从 低 人 口 密度 到 高 人 口 密度 的 级 数 在 调 色 板 中 的 表现 并 不 直观 。 红色 代表 最 高 密度 等 级 ， 而 品 
红色 表示 次 最 高 密度 等 级 。 但 蓝 色 虽 属 第 三 高 密度 等 级 ,其 所 占 的 视觉 比重 表现 得 要 高 于 品 红 
色 。 实际 上 ， 如 果 将 颜色 从 HSL 转换 到 Lab 中 .你 会 发 现 这 些 颜 色 的 实际 亮度 是 不 一 样 的 。 虽 
然 HSL 颜色 模型 可 能 为 这 些 颜色 配置 了 相同 的 亮度 值 ， 但 相对 于 更 代表 人 类 真实 感知 的 Lab 来 
说 ，HSL 色彩 空间 存在 一 定 程度 的 失真 。 
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在 图 8-21 中 ,通过 在 HSL 颜色 空间 中 按 比例 调整 亮度 值 ， 所 得 到 的 单 色调 调 色 板 也 具有 
误导 性 。 用 这 种 方式 生成 的 调 色 板 至 少 颜色 是 按照 人 口 密度 的 递增 由 浅 变 深 ， 但 表示 最 后 两 种 
密度 级 别 的 颜色 几乎 无 法 区 分 开 来 。 虽 然 在 HSL 颜色 空间 中 它们 的 亮度 并 不 一 样 ， 但 看 起 来 几 
乎 是 完全 相同 的 。 这 是 因为 HSL 中 的 Lightness 亮度 值 ( 等 同 HSB 中 的 Brightness 亮度 值 ) 与 
人 类 的 实际 感知 效果 并 不 一 致 





级 别 之 间 的 差异 非常 
区 的 颜色 就 更 淡 一 些 。 





瑞典 各 省 人 口 密度 瑞典 各 省 人 口 密度 
人 /平方 下 米 人 /平方 和 米 
国 ~"? 国 ~" 
图,o-:2? 
园 -9 
国 :-”，” 5 

多 图 ,%-'%， 国 ,wo-， 

国 :ov 国 :ov 

图 8-20 图 8-21 


在 HSL 模式 下 以 编码 的 方式 通过 色调 选 
取 颜 色 ， 所 得 调 色 板 的 感知 效果 与 数据 并 
不 一 致 


在 HSL 模式 下 以 编码 的 方 
度 选取 颜色 ， 所 得 调 色 板 上 FR 
并 不 一 致 。 代表 最 高 密度 等 级 的 两 种 颜色 
几乎 无 法 分 辨 开 来 





在 图 8-22 的 地 图 中 ,代表 人 口 密度 的 调 色 板 是 基于 感知 差异 设计 而 成 。 其 中 各 个 人 口 密度 


明显 。 而 且 ， 人 口 密度 集中 地 区 的 颜色 显得 更 深 一 些 ， 而 人 口 密度 稀少 地 


用 编码 的 方式 创建 与 人 类 感知 效果 相符 的 调 色 板 非 常 困难 ， 但 由 宾夕法尼亚 州立 大 学 的 


Cynthia Brewer 和 Mark Harrower 设计 的 Colorbrewer ( www.colorbrewer2.org， 
建 感知 清晰 的 调 色 板 变 得 非常 容易 。Colorbrewer 中 甚至 还 有 些 选项 ， 能 确保 设计 出 来 的 调 色 板 
能 兼容 色盲 ， 打 印 效果 好 ， 在 复印 之 后 仍然 清晰 可 辩 


见 图 8-23 ), 使 创 
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图 8-22 瑞典 各 省 人 口 密度 
使 用 基于 感知 设 
计 的 调 色 板 来 区 分 人 
口 密度 级 别 ， 能 更 直 
观 地 展示 数据 ， 而 且 
易于 阅读 






人 /平方 千 米 


0~99 


国 ~249 
园 25~49 
国 -~-"。 
国 ,oo-'"， 
国 :ov 














图 8-23 
对 于 数据 驱动 图 形 ， 
使 用 Colorbrewer 更 
易于 创建 对 于 感知 
清晰 的 调 色 板 

图 片 复制 获 Cynthia 
Brewer, Mark Harower 
以 及 宾 乡 
大 学 授权 
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8.5.3 ”连续 调 色 板 与 离散 调 色 板 


图 8-22 所 用 的 调 色 板 是 用 Colorbrewer 创建 的 ， 它 是 一 种 连续 调 色 板 ， 意 味 着 它 表示 的 数 
据 从 低 到 高 ， 有 着 连续 的 变化 。 在 表示 像 人 口 密度 这 类 比较 温和 的 数据 时 ， 使 用 连续 性 调 色 板 
是 合适 的 。 但 如 果 你 想 在 图 形 中 突显 出 数据 的 最 大 值 和 最 小 值 ， 或 者 标注 数据 的 中 间 值 。 在 这 
些 情况 下 使 用 离散 调 色 板 就 更 合适 一 些 。 离 散 调 色 板 中 通常 会 有 两 种 主 色相 ， 以 表现 数据 极 值 ， 
淡化 这 些 主 色相 得 到 的 中 间 色 代表 着 数据 的 中 间 点 〈 比如 中 间 值 )。 

图 8-24 展示 了 一 个 使 用 Colorbrewer 设计 而 成 的 离散 配色 方案 ， 用 以 表示 各 国 非 传染 性 疾 
病 发 病 率 数据 。 借 助 这 个 离散 调 色 板 ， 可 以 很 清楚 地 看 到 ， 日 本 、 法 国 等 国 非 传 染 性 疾病 发 病 
率 极 低 ， 而 伊拉克 和 阿富汗 的 发 病 率 则 非常 高 。 


2004 年 世界 非 传染 性 疾病 分 布 图 图 8-24 
使 用 感知 离散 的 调 色 
板 可 以 突出 数据 极 值 





8.6 十 六 进 制 颜色 的 思考 : 理解 Web 中 的 颜色 


使 用 CSS 编写 过 网 站 的 人 都 知道 ， 十 六 进 制 颜色 系统 是 多 么 费解 。 只 有 切身 经 历 过 的 人 才 
会 知道 红色 是 帮 F0000 而 黄色 是 丁 FFF00。 知 道 条 C7970 代表 暖 橙 灰色 的 就 更 少 了 。 我 们 大 多 
数 人 必须 借助 可 视 化 颜色 选择 器 ， 才 能 找到 真正 想 要 的 颜色。 

要 想 记 住所 有 的 十 六 进 制 颜色 代码 ， 有 这 么 一 个 小 窍门 。 只 需 简 单 地 去 试 一 下 ， 大 多 数 人 
就 都 知道 #888888 代表 中 性 灰色 ( 适合 用 于 泻 染 轻 淡 的 文字 )， 但 如 果 键 入 的 代码 呈现 出 的 颜色 
跟 预 想 的 颜色 不 同 ， 该 怎么 办 ? 如 果 你 知道 十 六 进 制 颜色 的 设计 机 理 ， 便 可 以 在 心中 预览 整个 
颜色 空间 ， 那 么 对 于 如 何 让 颜色 稍微 偏 红 一 些 ， 或 者 如 何在 中 性 灰 中 加 入 一 点 点 黄色 ， 就 都 了 
然 于 心 了 。 了 解 了 十 六 进 制 颜色 空间 ， 就 很 容易 达到 这 种 全 知 的 境界 . 同时 还 能 节省 你 的 开发 
时 间 ， 没 准 儿 还 能 让 你 的 朋友 们 大 吃 一 惊 。 
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要 真正 了 解 RGB 色 十 六 过 工作 书 首先 需要 了 RGB 色彩 模型 的 工 
作 机 制 。 电 脑 屏幕 是 基于 RGB 色彩 RGB 3 人 如 








果 你 曾经 仔细 地 近 曙 


色 条 纹 组 成 的 


观察 过 LCD 屏 








直 保 持 








使 用 开启 关 
构成 不 同 的 组 合 ，! 
呈现 出 每 个 像素 应 有 











Sei ( http://commons 
wikimedia.org/wiki 


User:Sei ) 














电脑 和 电 器 采用 的 颜色 本 晶 ， 这 种 模型 充分 利用 了 # 
合 的 方式 ， 从 来 讲 ， 这 并 不 了 过 彼此 相 邻 罢了 )， 但 由 于 
广 为 子 作 得 很 这 以 我 们 认为 它们 的 光线 是 香 加 在 一 起 自 
下 色光 和 绿色 光 混 合 7 
色 混 合 7 
东 厂 舍 ff J 谈资 地 次 








售 ， 
如 果 我 阻 断 红 光 . 


也 没有 被 邀请 去 外 





时 于 某 种 原因 ， 玫 


股 炖 鱼 的 
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在 加 色 模 型 中 ， 





蓝 三 色光 混在 
产生 白色 





很 显然 ， 我 邻居 家 的 家 庭 影院 系统 的 工作 原理 正 是 基于 我 刚才 提 到 的 RGB 加 色 模型 。 屏 幕 
上 投射 三 组 图 像 混合 在 一 起 就 形成 了 全 色彩 的 图 像 。 阻 断 任意 一 种 颜色 都 会 导致 图 像 只 能 
外 两 种 颜色 来 着 色 。 所 以 ， 当 我 阻 断 红 色光 时 ， 从 图 8-26 中 可 以 看 出 ， 剩 余 的 绿色 和 蓝 色 会 
成 蓝 绿 色 。 当 我 阻 断 绿 色光 时 ， 另 外 两 种 颜色 是 蓝 色 和 红色 ， 混 合 形成 品 红色 

如 果 你 想 亲 自体 验 一 下 的 话 ， 可 以 将 任意 一 张 RGB 图 片 ( 网 络 上 几乎 所 有 的 JPG 图 片 都 
是 RGB 图 片 ) 放 和 人 Photoshop， 然 后 在 通道 面板 中 关闭 某 个 通道 就 可 以 了 。 图 8-27 给 出 了 一 张 
RGB 色彩 的 图 片 (左上 图 )， 然 后 又 ( 沿 顺 时 针 方向 ) 给 出 分 别 关 闭 红色 、 蓝 色 和 绿色 通道 之 
后 的 图 片 







另 














图 8-2 

左上 图 是 一 张 RGB 
图 片 ,其 他 几 张 是 ( 沿 
顺 时 针 方向 ) 分 别 关 
闭 红色 、 蓝 色 和 绿色 
通道 之 后 的 图 片 ， 展 
示 了 RGB 模型 中 颜 
色相 互 影响 的 效果 
Mike Baird 摄 (http:/ 
Www.flickr.com/people/ 
mikebaird/ ) 
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8.6.2 RGB 的 十 六 进 制 表 示 法 


这 种 光线 的 相互 作用 ， 是 支撑 整个 Web 的 十 六 进 制 颜色 格式 的 基础 。 十 六 进 制 颜色 代码 反 
映 了 颜色 在 RGB 色彩 模型 中 的 位 置 ，RGB 色彩 模型 可 以 被 看 作 是 一 个 立方 体 ， 如 图 8-28 所 示 。 

立方 体 中 的 每 条 棱 代表 RGB 色彩 模型 中 的 一 种 颜色 。 位 于 图 中 心 的 交点 位 置 混合 了 100% 
的 三 种 颜色 ， 于 是 就 产生 了 白色 。 而 在 图 中 完全 看 不 到 的 另 一 个 顶 角 处 根本 没有 颜色 ， 于 是 就 
产生 了 黑色 。 左 下 顶 角 代表 100% 的 红色 ，0% 的 蓝 色 和 0% 的 绿色 ， 所 以 就 产生 了 纯 红色 。 红 
色光 和 绿色 光 产 生 黄 色光 ， 形 成 了 立方 体 的 左上 顶 角 。 因 此 ， 这 个 顶 角 就 代表 100% 的 红色 、 
0% 的 蓝 色 和 100% 的 绿色 。 


图 8-28 

十 六 进 制 颜色 模型 可 
以 用 一 个 立方 体 来 表 
示 ， 每 条 校 代表 一 条 
RGB 通道 

SharkD (http:// 
commons.wikimedia. 


omg/wiki/User'SharkD ) 





十 六 进 制 颜色 代码 是 一 组 用 十 六 进 制 计数 法 表示 的 数值 ( 从 0-255 )。 因 此 ， 红 色 是 
#F0000， 其 中 “FF” 表 示 红 色 通 道 的 值 为 255 

六 进 制 颜色 代码 中 的 第 一 位 数字 表示 从 0-15 的 值 。 数 字 0-9 表示 自身 的 值 ， 然 后 从 A~F 
分 别 表示 10-15。 由 于 每 条 通道 有 两 位 数组 成 ， 而 且 每 一 位 代表 着 一 个 十 六 进 制 值 ， 所 以 每 个 通道 
有 256 种 可 能 的 值 ， 或 者 说 有 从 0255 种 可 能 的 值 -“00” 表 示 0， 而 “FF” 表 示 255。 


8.6.3 神游 十 六 进 制 “ 立 方 体 ” 


图 8-29 显示 了 256 色 RGB 立方 体 的 红色 “ 层 ” 的 36 种 颜色 。#FF0000 表示 红色 (255 红 、 
0 蓝 、0 绿 )，#FFOOFF ( 右 下角 ) 表示 品 红色 (255 红 、0 蓝 、255 绿 )。 网 格 顶部 和 左 侧 的 数值 
分 别 显示 了 十 六 进 制 系统 中 增加 蓝 色光 和 绿色 光 的 方式 。 将 绿色 光 通 道 增加 60%( 153, 即 “99”)， 
就 得 到 了 姓 F9900， 也 就 是 橙黄 色 - 

要 想 做 到 能 在 心中 预览 256 色调 色 板 中 的 十 六 进 制 颜色 立方 体 ， 你 只 需要 记 住 下 面 这 个 数 
列 : 0、.3、6、9、C、F。 在 编写 CSS 时 ， 你 甚至 可 以 把 十 六 进 制 编码 简写 为 三 个 字符 。 因 此 ， 
#00 是 红色 ,三 OF 是 品 红色 ， 而 狂 90 是 橙黄 色 
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图 8-29 
#EF 一 一 二 六 进 制 空 间 中 的 红色 层 
抽 256 色 RGB 色彩 模型 
荐 -00 ## 一 33 砷 -66  # 一 99 六 一 CC # 一 FF 中 的 红色 “ 层 ” 





S 进 制 计数 
0~15 00 01 02 03 04 05 06 07 08 09 0A OB OC 0D OE OF 
16~31 10 11 12 13 14 15 16 17 18 19 1A IB IC ID IE IF 


这 些 知识 在 编程 时 会 派 上 用 场 。 比 方 说 ， 你 想 柔 化 一 下 排版 中 的 调 色 板 ， 如 图 8-30 所 示 。 
从 左 侧 的 普通 黑色 ( #000 ) 字体 样式 开始 ， 这 些 字体 颜色 稍微 有 点 深 ， 你 希望 它 能 更 低调 一 些 。 
因此 ， 你 可 以 将 标题 颜色 改 为 偏 深 的 中 性 灰色 ( 妇 33 )， 而 把 副标题 颜色 改 为 较 浅 的 中 性 灰色 
(#999 )。 


You’reth You'reth 本 
vou tet le man TI eman 通过 更 改 十 六 进 制 数 
值 来 改变 灰 度 还 是 比 

较 简单 的 


之 所 以 这 么 修改 灰 度 值 ， 是 因为 只 要 R、G 和 B 三 部 分 保持 数值 相等 ， 会 从 纯 白色 沿 着 
不 同 程度 的 灰色 一 直到 纯 黑 色 。 知 道 #000 是 黑色 ，#FFF 是 白色 ， 就 可 以 轻松 地 将 灰 度 调 暗 
一 些 或 者 淡 一 些 。 你 甚至 不 需要 记 住 3、6、9 等 数值 ， 因 为 你 知道 #AAA 的 灰 度 要 比 #999 稍 
微 淡 一 些 。 

再 比方 说 ， 你 希望 大 标题 稍微 偏 红 一 些 。 那 么 把 #33 改 为 #933， 你 就 将 红色 通道 从 “33” 
提升 了 为 "99"( 见 图 8-31. 上 图 ), 但 这 对 你 来 说 有 点 太 红 了 - 由 于 了 解 红 绿 蓝 三 色光 的 混合 原理 ， 
因此 你 知道 如 果 提 升 一 点 绿色 通道 ,将 会 抵消 一 些 红色 。 于 是 你 将 绿色 通道 从 “33" 改 为 了 “66”， 
最 终 得 到 值 #963 ( 见 图 8-31， 中 图 ). 
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图 8-31 

了 解 十 六 进 制 颜色 立 学 

pn #0 YOU re the man 
准确 地 调整 颜色 #000 now dog! 


:33 YoOu re the man 


now dog! 


6 You re the man 


now dog! 


462666 YOU re the man 


now dog! 


事实 证 明 #963 仍然 有 点 偏 橙色 。 于 是 我 们 可 以 调 低 一 点 绿色 通道 ， 从 “66” 调 为 “55"， 
以 期 颜色 偏 红 一 些 , 但 #953 要 比 你 预想 的 偏 深 一 些 。 于 是 你 同时 调 高 了 绿色 ( 从 “55” 到 “66" ) 
和 蓝 色 通道 (从 “33” 到 “66" ), 得 到 的 颜色 为 #966 。 这 已 经 很 接近 理想 中 的 颜色 了 ， 但 你 仍 
然 希 望 颜色 再 红 一 些 。 但 接 下 来 的 #A66 还 是 不 够 红 ， 而 #B66 又 太 红 。 

这 时 就 需要 真正 进行 精确 调整 了 。 如 果 红 色 通 道中 的 “AA” 不 够 红 , 而 “BB” 又 太 红 的 话 ， 
那么 你 就 得 在 两 者 之 间 找 到 一 个 合适 的 值 。 图 8-32 显示 的 是 十 六 进 制 数 值 递 增 方式 的 样 例 。 从 
中 你 可 以 看 出 “AB" 是 跟 在 “AA” 之 后 的 数值 ,而且 当 你 递增 至 “AF" 之 后 ,下 一 个 数值 是 “B0”， 
然后 是 “B1”"、“B2”"， 而 “B2” 正 是 “AA” 和 “BB” 之 间 近 乎 完美 的 颜色 选择 。 

图 8-32 十 六 进 制 计数 


通过 了 解 十 六 进 制 颜 ”0~15 oo 01 02 03 04 05 06 07 08 09 OA OB OC OD OF OF 
色 代 码 的 增长 方式 ， 


你 可 以 更 容易 地 在 
256 色调 色 板 的 颜色 
之 间 做 细微 调整 


最 终 你 选择 了 必须 用 六 位 字符 才能 表示 的 #B26666 ( 见 图 8-31， 下 图 )， 这 是 一 种 粉 灰色 ， 
和 橡皮 泥 色 很 相似 。 





16~31 10 11 12 13 14 15 16 17 18 19 1A 1B IC ID IE IF 
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8.6.4 未 来 : HSL 


或 许 用 上 面 提 到 的 例子 要 点 小 聪明 。 当 你 有 了 足够 的 实践 经 验 之 后 便 可 以 随心 所 欲 地 在 代 
码 中 调整 颜色 。 但 是 必须 承认 ， 这 种 技术 只 是 吸引 眼球 的 嗪 头 一 操作 RGB 颜色 模型 确实 很 不 
直观 。 如 果 你 能 克服 它 ， 还 不 如 用 rgb () 方法 来 定义 颜色 ( 红色 就 是 xgb(255，0，0) )。 

正如 使 用 颜色 选择 器 时 HSB 颜色 模型 更 加 直观 ，CSS3 承诺 为 Web 设计 引入 同样 直观 的 模 
型 :HSL。HSB 和 HSL 非常 相似 : HSL 中 的 了 和 S 分 别 代表 色调 和 饱和 度 , 这 和 HSB 中 的 一 致 ， 
但 是 L 代表 亮度 ， 而 不 是 明度 。 在 HSL 中 , 带 100% 亮度 的 任何 颜色 都 是 白色 ， 纯 色调 给 定 的 
亮度 为 50%。 然而 在 HSB 中 ,100% 明度 才 产生 纯色 调 , 而 且 饱 和 度 必须 设置 为 0% 才能 产生 白色 。 

要 在 CSS 中 选择 一 种 HSL 色调 ， 你 需要 在 0 到 360 之 间 选 择 一 个 数值 。 所 有 的 色调 被 隐 性 
地 排列 成 一 个 圆 形 〈 见 图 8-33 )。 红 绿 蓝 三 色 在 圆 中 等 距 排列 。 因 此 , 数值 120 ( 也 代表 120 度 ) 
为 绿色 调 ， 而 数值 240 为 蓝 色调 。 

另外 饱和 度 和 亮度 这 两 个 数值 ， 是 按 百 分 比 表 示 的 : 100% 饱和 度 和 50% 亮度 结合 产生 纯 
色调 。 图 8-34 显示 了 一 组 HSL 颜色 样 例 及 其 对 应 的 数值 


图 8-33 
HSL 颜色 模型 中 的 色 
调 被 排列 成 圆 形 。 你 
所 选择 的 色调 值 与 色 
调 在 圆 上 所 处 的 角度 
相对 应 


0 


图 8-34 
EE HEE HE II | 1 


hal(0, 100%, $0%%) hsl(0, 100%6, 50%6) hsl(120, 100%, SO%6) hs1(120, $0%%, 75%6) hsl(240, 100% 50W) hsl(240, 0%, 509%) 
HSL 属性 


由 于 色调 的 排列 方式 逻辑 分 明 ， 你 可 以 很 快 地 学 会 如 何在 模型 中 选择 想 要 的 颜色 。 而 且 ， 
以 编码 的 方式 在 这 种 颜色 模型 中 创建 渐变 以 及 数据 驱动 图 形 ， 也 更 加 容易 





提醒 ”HSL 图 形 的 感知 亮度 并 不 是 完全 准确 ， 因 为 HSL 的 亮度 属性 并 不 像 Lab 颜色 模型 中 的 
亮度 属性 那么 准确 





不 幸 的 是 , IE 9 之 前 的 版 本 中 并 不 支持 HSL 颜色 ,所 以 HSL 颜色 在 商业 应 用 程序 之 中 的 切 
实 应 用 还 需要 一 段 时 间 。 
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8.7 色彩 模型 实践 : 为 什么 名 片 色彩 和 网 站 色彩 (永远 ) 不 相配 


虽然 在 颜色 的 数值 表示 ， 以 及 颜色 选取 方面 ，Lab、HSB 和 HSL 这 三 种 颜色 模型 有 着 不 同 
的 优 缺 点 , 但 最 终 显示 的 颜色 还 要 受到 输出 技术 的 限制 。 无 论 是 输出 到 屏幕 ， 还 是 打印 机 上 ， 
为 了 确保 最 终 成 果 尽 可 能 地 和 设计 初衷 相 匹 配 ， 就 需要 了 解 如 何 去 掌 控 这 些 限制 。 

每 个 专业 跨 媒体 设计 师 都 曾经 历 过 这 样 的 挫败 : 有 的 客户 坚决 要 求 名 片上 的 颜色 要 和 他 们 
网 站 上 的 颜色 保持 一 致 。 尽 管 已 经 有 很 多 极 好 的 技术 ( 稍 后 我 会 讲 到 它们 ) 能 使 屏幕 和 打印 机 
间 的 颜色 更 相像 ， 但 要 真正 实现 完全 一 致 ， 则 是 根本 不 可 能 的 。 如 果 客 户 就 是 你 自己 ， 我 会 尽 
力 劝 你 不 要 在 这 个 问题 上 浪费 精力 。 

让 我 们 拿 假设 的 Bay Bridge Painters 的 网 站 和 名 片 设计 ( 见 图 8-35 ) 举例 说 明 。 名 片上 的 蓝 
色 不 如 网 站 上 的 蓝 色 那样 充满 活力 ， 这 是 因为 屏幕 的 颜色 限制 相对 印刷 的 颜色 限制 有 所 区 别 。 





图 8-35 

Bay Bridge Painters Ss, 2 
We Paint 

的 名 片 和 网 站 上 的 蓝 BAY 

色 并 不 相称 ， 是 因为 Bridge Pointers 


印刷 材料 和 电脑 屏幕 
的 显 色 能 力 有 区 别 ay yd 中 CT 
Bridge Painters your free or pointing quote! 














8.7.1 RGB 显示 与 CMYK 彩色 印刷 的 不 同 


电脑 屏幕 是 基于 RGB 颜色 模型 来 显 色 的 ， 所 以 ，Bay Bridge Painters 网 站 上 的 颜色 是 由 发 
出 的 红 绿 蓝 三 色光 混合 形成 的 。 但 是 ， 名 片 并 不 会 发 光 ， 颜 色 是 通过 名 片上 的 油墨 反射 光线 离 
开 纸 面 再 进入 人 眼 形成 的 。 

名 片 是 以 CMYK 方式 印刷 而 成 的 ， 即 将 极 小 的 青色 、 品 红色 、 黄 色 和 黑色 四 种 油墨 点 排列 
成 所 需要 的 颜色 。CMYK 并 不 是 加 色 模 型 ， 而 是 减 色 模型 。 减 色 模型 首先 假定 光源 为 白光 ( 房 
间 中 的 光源 )， 通 过 颜料 反射 掉 程 度 不 同 的 白光 来 得 到 各 种 色彩 。 

图 8-36 显示 了 在 减 色 模型 中 CMYK 油墨 的 混合 效果 。 不 知道 你 是 否 注意 到 了 ，RGB 模型 
中 任意 两 原色 组 合 而 成 的 颜色 和 CMYK 模型 中 使 用 的 油墨 颜色 完全 相同 。 而且，CMYK 模型 
中 的 任意 两 色 油墨 ( 黑色 除外 ) 混合 之 后 基本 上 会 生成 红 绿 蓝 三 色 。 而 当 青色 、 品 红色 和 黄色 
油墨 混在 一 起 时 ， 它 几乎 阻 断 了 所 有 的 光线 .生成 的 颜色 非常 接近 黑色 。 在 这 个 混合 模型 中 加 
人 黑色 是 为 了 节省 油墨 ， 增 加 颜色 深度 ,或 者 为 了 演 染 时 更 清晰 。 


图 8-36 

CMYK 减 色 模 型 中 
的 青色 、 品 红色 以 及 
黄色 油墨 的 混合 效果 





很 明显 ，RGB 和 CMYK 颜色 模型 的 显 色 能 力 有 着 一 定 的 相似 之 处 ， 但 也 有 一 些 不 一 致 的 
地 方 。RGB 和 CMYK 颜色 模型 在 再 现 颜色 方面 都 有 着 独 另外 ， 人 类 视觉 系统 所 
能 感知 的 颜色 也 是 有 限 的 。 在 特定 颜色 模型 的 范畴 之 内 了 解 人 类 视觉 的 局 限 性 ， 是 准确 运用 颜 
色 的 关键 所 在 






8.7.2 色 域 


无 论 是 人 类 的 视觉 ， 电 脑 显示 器 还 是 打印 机 ， 颜色 捕捉 系 
范围 被 称 为 色 域 , 在 某 个 系统 的 色 域 中 可 以 呈现 的 颜色 ,并 不 
因此 需要 通过 色彩 管理 来 弥补 这 些 不 一 致 的 地 方 

从 一 个 色 域 转换 到 另 一 个 色 域 时 为 了 人 入 色 的 一 致 性 ， 色 域 被 描述 为 ICC 色彩 特性 文件 
ICC 色彩 特性 文件 ( 基于 国际 色彩 联盟 制定 的 规范 ) 中 存 有 描述 颜色 空间 局 限 性 与 特性 文件 相 
关 空 间 ( Profile Connection Space，PCS ) 的 数据 。 通 常情 况 下 ， 与 ICC 文件 相关 的 PCS 是 我 之 
前 提 到 过 的 Lab 颜色 空间 

图 8-37 显示 了 一 些 常用 颜色 空间 的 色 域 。RGB 颜色 模型 ( 以 Adobe RGB 和 sRGB 颜色 空 
间 为 代表 ) 一 般 用 于 数码 相机 和 监控 器 ，CMYK 颜色 模型 用 于 打印 机 ， 印 刷 业 比较 流行 的 U.S 
Web Coated (SWOP) v2 就 是 代表 CMYK 颜色 模型 的 颜色 空间 。 从 中 可 以 看 出 ， 基 于 RGB 的 颜 
色 空 间 和 来 自 CMYK 的 颜色 空间 有 着 极 大 的 差别 ， 两 者 都 没有 真正 包含 所 有 人 类 可 以 实际 区 分 
的 颜色 。 当 然 ， 在 这 张 图 中 你 不 可 能 看 到 所 有 的 颜色 一 一 因为 这 张 图 片 是 使 用 CMYK 印刷 工艺 
印 制 到 书 中 的 

由 于 ICC 色彩 特性 文件 对 这 些 颜 色 空间 的 描述 和 特性 文件 相关 空间 有 关 ， 所 以 当 转换 颜色 
空间 时 ， 涉 及 的 颜色 会 有 一 个 非常 清晰 的 对 应 关系 

比方 说 ， 留 意 Adobe RGB 色 域 中 的 蓝 色 在 CMYK 色 域 中 的 对 应 程度 。 如 果 你 要 将 一 张 
Adobe RGB 图 片 转换 为 CMYK 格式 ， 而 且 图 片 中 包含 一 种 CMYK 色 域 内 存在 的 蓝 色 ， 那 么 这 
种 颜色 会 以 某 种 方式 转变 为 CMYK 颜色 空间 可 以 再 现 的 感知 度 最 接近 的 蓝 色 





或 者 颜色 复制 系统 的 显 色 能 力 
- 定 能 在 另 一 个 系统 的 色 域 中 呈现 ， 
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为 了 完成 以 上 转换 ,在 Adobe RGB 标记 的 图 片 中 表示 的 颜色 需要 引用 一 个 像 Lab 这 样 的 中 
间 颜 色 空间 (或 者 PCS )， 来 确定 CMYK 颜色 空间 中 的 哪 种 颜色 更 接近 预期 的 蓝 色 。 转 换 过 程 
中 会 用 到 我 前 面 讲 过 的 同色 异 谱 现象 。 由 此 产生 的 颜色 不 太 可 能 和 源 颜色 完全 相同 ， 但 是 看 起 
来 可 以 是 一 样 的 


图 8-37 

颜色 空间 之 间 ， 以 及 
各 种 设备 之 间 的 色 域 
相差 很 大 






CMYK 
U.S. Web Coaled (SWOP) v2 
500 


8.7.3 ” 跨 媒 体 设计 和 色彩 管理 


因此 ， 在 准备 Bay Bridge Painters 的 平面 设计 时 ， 设 计 者 ( 我们 叫 她 Julie ) 最 初 是 在 Adobe 
Tllustrator 中 附加 sRGB 特性 文件 设计 的 Logo。 开 始 设计 名 片 时 ，Julie 需要 将 颜色 转换 成 可 以 在 
CMYK 空间 中 完美 显示 的 颜色 。 如 图 8-38 所 示 ，Adobe Illustrator 在 颜色 选择 器 中 给 出 了 “超出 
色 域 范围 ”的 警告 ， 提 示 她 所 选择 的 Logo 颜色 无 法 很 好 地 转换 到 CMYK 模型 当中 


图 8-38 

如 果 你 使 用 的 RGB 
颜色 和 CMYK 颜色 
空间 不 兼容 的 话 ， 很 
多 像 Adobe Illustrator 
(图 中 所 示 ) 这 样 的 
软件 会 提示 “超出 色 
域 范围 ”; 反之 亦 然 
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Logo 上 的 蓝 色 在 屏幕 上 看 起 来 棒 极 了 - 当 Julie 将 lllustrator 文件 转换 到 U.S. Web Coated 
(SWOP) v2 CMYK 颜色 空间 时 ，Illustrator 将 它 转换 为 了 CMYK 可 以 再 现 的 最 接近 的 蓝 色 。 


这 种 蓝 色 看 起 来 和 原来 不 太一 样 ， 但 根据 她 在 色 域 方面 的 知识 ，Julie 知道 这 已 经 是 最 好 的 选 
择 了 。 


1.Adobe RGB VS sRGB 

通过 对 比 Adobe RGB 的 广 色 域 和 sRGB 的 色 域 ， 你 可 能 会 认为 Julie 更 应 该 使 用 Adobe 
RGB 特性 文件 。 尽 管 Adobe RGB 的 确 表 示 了 更 广泛 的 颜色 范围 ， 但 是 在 实际 颜色 显示 方面 ， 
它 仍然 有 着 和 sRGB 一 样 的 技术 限制 。 

更 重要 的 是 ， 要 想 在 某 个 特定 特性 文件 标记 的 图 片 中 准确 地 描绘 出 颜色 ， 那 么 图 片 查看 程 
序 或 者 Web 浏览 器 必须 具有 相应 的 色彩 管理 能 力 ， 来 解析 ICC 特性 文件 ， 并 准确 地 转换 为 显示 
颜色 。 

为 Web 图 片 关联 ICC 特性 文件 时 ， 会 发 生 什么 呢 ? 如 果 你 为 图 片 关联 Adobe RGB 特性 文 
件 ， 没 有 色彩 管理 的 浏览 器 (Chrome 浏览 器 以 及 IE 9 之 前 的 浏览 器 ) 会 按照 sRGB 图 片 进行 解 
析 ， 图 片 中 的 颜色 会 变 淡 。 如 果 你 为 图 片 关 联 任意 一 种 ICC 特性 文件 ， 然 后 在 CSS 中 为 放置 图 
片 的 背景 部 分 附 上 相同 的 颜色 ， 那 么 在 Mac OS 下 具有 色彩 关联 的 浏览 器 中 ( Firefx 和 Safari 浏 
览 器 ,但 Chrome 浏览 器 除外 )， 图 片 中 的 颜色 和 背景 中 的 颜色 并 不 相配 。Mac OS 处 理 图 片 时 ， 
是 假定 图 片 使 用 的 特性 文件 标记 和 电脑 显示 器 相同 ， 而 不 是 以 sRGB 解析 未 标记 的 CSS 颜色 。 

由 于 在 Web 中 支持 色彩 管理 并 不 可 靠 ， 所 以 在 sSRGB 空间 中 设计 图 片 的 显示 效果 最 稳妥 ， 
而 且 保 存 图 片 时 没 必要 关联 ICC 特性 文件 。 幸 运 的 是 ， 像 Photoshop 等 Adobe 产品 中 颜色 设置 
( Color Settings ) 的 默认 设置 是 使 用 sRGB 颜色 空间 处 理 RGB 文件 ， 而 且 另 存 为 网 页 格式 ( Save 
for Web ) 的 选项 会 默认 去 掉 图 片 中 的 ICC 特性 文件 


2.“ 校 样 ”和 预览 颜色 变化 

Julie 使 用 了 正确 的 颜色 设计 流程 . 但 是 Bay Bridge Painters 的 所 有 者 Aaron 希望 名 片 打印 出 
来 的 效果 能 更 好 一 些 。 还 好 Julie 已 经 习惯 了 这 样 的 要 求 ， 她 使 用 名 为 分 光 光 度 计 的 设备 为 监视 
器 制作 了 ICC 特效 文件 。 Julie 电脑 中 的 操作 系统 使 用 这 个 ICC 特性 文件 来 修正 监视 器 中 的 颜色 ， 
使 它 看 起 来 和 用 来 转换 特性 文件 的 ， 客 观 标准 的 特性 文件 相关 空间 ( Lab ) 中 的 颜色 一 致 

但 是 Bay Printing 的 打印 机 有 自己 的 特点 而且 Julie 为 Aaron 名 片 选择 的 纸张 也 比较 特殊 。 
于 是 Bay Printing 做 了 一 些 打印 测试 并且 建 立 了 另外 一 个 ICC 特性 文件 。Julie 使 用 Adobe 
Illustrator 中 的 校 样 设置 ( Proof Setup ) 在 屏幕 上 模仿 Bay Printing 打印 出 的 名 片 的 颜色 - 

Julie 先 把 RGB Logo 转换 为 CMYK， 然 后 使 用 针对 监视 器 和 Bay Printing 打印 机 的 ICC 特 
性 文件 来 模仿 打印 后 的 颜色 。 
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Mac OS 和 Web 中 的 色彩 管理 
en 和 4 本 以 防止 Mac OS 将 图 片 S 颜色 匹 
CSS 的 失真 
全 9] 
J 色 尝 朋 
析 ICC 特性 文件 ， 而 其 它 是 下 GTI 主 存 图 片 时 


附加 一 个 ICC 特性 文 
要 在 Adobe Photoshop 

由 于 色 
仔细 的 校对 ， 名 片 的 裕 样 1 





aron 于 其 二 
有 屏 甘 中 和 打印 出 来 的 效果 也 下 





3. 专 色 印刷 

刚才 我 所 描述 的 是 一 个 假设 的 情节 ， 但 如 果 Aaron 真 的 需要 大 量 名 片 的 话 ，Bay Printing 
可 能 需要 使 用 专 色 印刷 。 专 色 印 刷 的 油墨 都 是 为 匹配 特定 颜色 而 定制 的 。PANTONE ( www. 
pantone.com ) 是 印刷 色 卡 ( 见 图 8-39 ) 和 油墨 配方 ( 设计 师 和 印刷 师 用 于 更 好 的 掌握 产生 的 颜 
色 效 果 ) 最 著名 的 供应 商 。 他 们 甚至 制作 了 色 卡 来 展示 和 16 进 制 颜色 最 匹配 的 印刷 油墨 

当 采 用 类 似 PANTONE 这 样 的 专 色 印刷 时 ， 会 使 用 所 需 颜 墨水 ， 而 不 是 CMYK 点 
点 混合 物 。 这 样 产生 的 颜色 效果 流畅 而 且 更 容易 掌握 。 专 色 印 刷 常用 于 印刷 单调 色 块 ， 或 者 特 
定 颜色 的 网 线 板 色 调 ， 而 且 只 能 使 用 大 型 工业 胶印 机 印刷 。 如 果 你 购买 的 是 快捷 网 络 打印 服务 ， 
那么 只 能 使 用 CMYK 方式 打印 了 











图 8-39 

设计 者 可 以 通过 
PANTONE 的 色 卡 为 
印刷 材料 选择 特别 的 
颜色 一 一 而 且 有 时 会 
推荐 和 Web 应 用 最 
贴近 的 颜色 

Rocco Lucia 摄 (http:/ 
wwwflickr.com/people 
foxtwo/ ) 
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8.8 小 结 


谈 到 色彩 ， 无 论 你 的 品味 如 何 ， 要 想 成 功 运用 色彩 ， 都 需要 先 了 解 色彩 。 通 过 认识 色彩 的 
能 力 和 限制 ， 了 解 定义 色彩 的 系统 以 及 色彩 的 最 终 展示 媒介 ， 可 以 确保 你 想 要 传递 的 色彩 正 是 
你 的 受众 所 看 到 的 色彩 - 
口 了 解 红 绿 蓝 三 色光 原理 。 用 十 六 进 制 代码 做 一 些 CSS 实验 ,单独 改变 某 个 通道 并 观察 色 
彩 的 变化 。 当 你 下 次 在 CSS 代码 中 修改 色彩 时 ， 试 着 在 心中 预览 十 六 进 制 色彩 空间 并 做 
出 色彩 调整 。 

口 如 果 图 形 中 色彩 的 差异 对 信息 内 容 非 常 重要 ， 试 着 用 Adobe Photoshop 或 者 其 他 工具 对 
你 的 色彩 进行 软 打样 ， 以 确保 常见 类 型 的 色盲 患者 可 以 区 分 出 这 些 色 彩 

口 设计 数据 驱动 图 形 时 ， 要 使 用 和 数据 性 质 一 致 的 调 色 板 。 在 定性 数据 集中 使 用 一 致 感知 

亮度 的 色彩 ， 而 在 定量 数据 集中 使 用 感知 亮度 具有 适当 差异 的 调 色 板 。 

口 做 跨 媒体 设计 时 ， 要 牢记 CMYK 和 RGB 色彩 模型 有 着 不 同 的 显 色 能 力 ， 或 者 说 色 域 。 

当 使 用 RGB 图 片 时 , 要 确保 是 在 sRGB 色彩 空间 中 , 这样 图 片 色彩 才能 被 多 种 设备 解析 。 
当 需 要 和 CSS 色彩 匹配 时 ， 切 勿 为 Web 图 片 附加 ICC 特性 文件 。 





第 章 


色彩 理论 


对 于 色彩 学 我 们 已 经 了 解 了 很 多 ， 然 而 颜色 及 其 使 用 却 充满 了 主观 色彩 。 虽 然 我 们 对 颜色 
的 一 些 心理 反应 可 以 追溯 到 史前 生命 时 期 ， 但 是 颜色 的 含义 却 因 文化 的 不 同 而 不 同 ， 而 且 也 因 
人 而 异 。 此 外 ,颜色 的 应 用 也 受制 于 情境 : 在 一 种 情境 下 具有 积极 意义 的 颜色 ， 在 另 一 种 情境 
下 却 会 产生 相反 的 效果 。 出 于 美学 追求 ， 并 且 为 了 理解 并 建立 一 种 体系 ， 对 于 如 何 搭配 颜色 才 
能 营造 出 特定 的 氛围 或 感觉 这 一 课题 ， 人 们 进行 了 大 量 深刻 的 思考 与 实践 。 一 旦 理解 了 颜色 的 
相互 作用 方式 ， 以 及 赋予 颜色 意义 的 因素 ， 你 就 可 以 很 好 地 驾驭 颜色 了 

想 要 了 解 颜色 ， 首 先 需要 了 解 人 类 在 历史 演进 过 程 中 对 颜色 的 特定 反应 。 此 外 ， 一 些 生理 
上 的 因素 也 会 影响 我 们 对 颜色 的 反应 。 随 着 时 间 的 推移 ， 在 这 些 因素 的 共同 作用 下 ， 不 同 的 人 
类 文明 为 颜色 赋予 了 独特 的 含义 ， 使 得 颜色 的 喜好 因 人 而 异 。 不 过 ， 现 在 网 络 上 也 已 经 开始 涌 
现 出 一 些 跨 文化 的 常规 颜色 用 法 。 除 了 致力 于 单纯 用 色彩 进行 信息 传播 ， 艺 术 家 和 理论 家 们 现 
在 也 开始 研究 能 在 设计 中 营造 特定 氛围 或 感觉 的 公式 化 色彩 关系 - 

本 章 会 讲述 如 何 用 色彩 创造 赏心悦目 的 设计 ， 同 时 又 能 将 信息 清晰 地 传递 给 你 的 受众 。 我 
将 介绍 一 些 理论 ， 盖 述 那些 帮助 早期 人 类 生存 下 来 的 颜色 信号 ， 如 何 继续 对 我 们 产生 心理 上 的 
影响 ， 并 在 我 们 的 文化 中 变 得 如 此 根深 蒂 固 。 同 时 会 简要 介绍 ， 在 为 不 同文 化 背景 的 用 户 设计 
时 需要 考虑 的 一 些 文化 因素 ， 而 且 还 会 讲解 一 些 Web 设计 中 的 常规 色彩 用 法 。 最 后 ， 我 将 介绍 
一 些 常见 的 色彩 关系 ， 帮 助 你 恰当 地 进行 颜色 搭配 。 

与 设计 中 的 大 部 分 情境 一 样 ， 使 用 颜色 的 方式 并 不 是 一 成 不 变 的 。 但 是 只 要 具备 了 这 种 思 
想 体系 ,就 可 以 用 它 来 检验 设计 作品 中 的 颜色 使 用 是 否 得 当 , 而 且 也 可 以 开始 有 目的 地 使 用 颜色 ， 
而 不 仅仅 是 通过 猜测 或 者 妄想 ,妄想 有 一 天 忽然 就 拥有 了 完美 运用 颜色 的 天 赋 。 


9.1 对 色彩 的 反应 贯穿 着 整个 人 类 历史 


颜色 的 含义 因 文化 和 个 人 而 异 。 大 多 数 人 对 特定 颜色 的 反应 是 在 时 间 日 积 月 累 中 形成 的 。 
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当 在 某 些 环境 下 看 到 某 些 特殊 颜色 时 ,往往 会 令 我 们 联想 到 与 之 相关 的 事物 。 在 早期 人 类 历史 中 
对 色彩 的 正确 反应 与 否 事 关 原始 人 的 生死 ， 只 有 正确 且 机 警 地 对 色彩 进行 反应 ， 才 能 使 其 生存 
下 来 ， 从 而 将 自己 的 基因 遗传 给 后 代 。 可 能 就 是 因为 这 样 的 原因 ， 一 些 对 颜色 的 联想 反应 便 深 
深 根 植 于 我 们 对 颜色 的 生理 与 心理 反应 之 中 。 

色彩 联想 或 许可 以 帮助 我 们 寻找 可 食用 的 食物 。 很 多 可 食用 浆果 都 是 红色 的 ， 而 绿色 的 植 
物 则 有 助 于 吸引 我 们 来 到 富饶 肥沃 的 土地 。 水 面 由 于 反射 天 空 而 呈现 出 的 蓝 色 可 能 会 让 我 们 感 
到 舒缓 平静 ， 因 为 有 水 的 地 方 就 可 能 有 食物 。 太 阳 和 火焰 也 会 与 黄 橙 两 色 产生 关联 ， 因 此 这 两 
种 颜色 会 在 某 些 情况 下 有 着 积极 的 含义 。 

但 是 ， 同 样 的 颜色 在 某 些 环境 下 也 会 和 危险 关联 起 来 。 红 色 是 血 的 颜色 ， 在 狩猎 或 与 敌人 
交战 时 ， 根 据 流 血 对 象 的 不 同 ， 红 色 的 含义 也 有 所 不 同 。 可 食用 食物 很 少 有 蓝 色 的 ， 而 霉菌 通 
常 是 蓝 色 的 ， 所 以 蓝 色 可 能 就 与 腐烂 变质 的 食物 有 关联 。 当 看 到 蛇 或 者 是 看 似 无 害 (但 也 可 能 
有 毒 ) 的 青蛙 时 ， 黄 色 和 橙色 无 疑 对 人 有 着 警示 的 作用 。 深 色 象征 可 能 会 出 现 威胁 ， 因 为 我 们 
的 祖先 知道 要 警惕 晚上 出 没 的 食肉 动物 ， 或 者 在 雷雨 时 寻找 掩护 。 


9.2 色彩 反应 和 人 类 生物 学 


我 们 对 颜色 的 反应 存在 一 些 潜在 的 生物 学 因素 。 一 般 认为 ， 面 对 处 于 可 见 光 谱 尾 部 的 冷色 
(紫罗兰 色 、 蓝 色 和 绿色 )， 我 们 的 感觉 较为 放松 ; 对 于 暖色 ( 黄色 、 橙 色 和 红色 )， 我们 则 感觉 
比较 兴奋 。 

在 第 8 章 中 ,我 们 介绍 过 人 类 色觉 源 于 眼睛 中 视 锥 细胞 受到 刺激 。 负 责 探 测 可 见 光 谱 中 “ 冷 ” 
色 的 短波 视 锥 细胞 的 数量 远 不 及 中 波 视 锥 细胞 和 长 波 视 锥 细胞 的 数量 ， 而 且 后 两 种 视 锥 细胞 所 
探测 的 可 见 光谱 暖色 部 分 有 所 重 倒 。 此 外 ,视网膜 中 心 四 处 完全 没有 短波 视 锥 细胞 ， 而 这 里 恰 
恰 是 最 佳 细节 效果 的 视觉 焦点 中 心 。 

因此 ， 我 们 推测 蓝 色 和 其 他 “ 冷 ” 色 之 所 以 具有 令 人 放松 的 作用 ， 其 中 部 分 原因 正 是 由 于 
它们 对 视觉 系统 的 刺激 较 少 。 虽然 为 了 寻找 与 蓝 色 对 应 的 生理 反应 ,已 经 进行 了 大 量 的 科学 研究 
但 结果 都 不 尽 如 人意 。 不 过 ， 下 文 将 向 你 介绍 ,已 经 有 令 人 信服 的 证 据 表 明 ， 红 色 可 以 对 我 们 
的 身体 产生 一 些 强烈 的 影响 。 


9.3 红色 的 魔力 : 为 什么 你 根本 赢 不 了 “Target 挑战 ” 


美国 零售 商 Target 百货 是 世界 上 最 具 品 牌 意识 的 公司 之 一 。 除 了 产品 设计 优良 而 且 价格 实 
惠 外 ,人 们 还 逐渐 将 去 Target 购物 视 作 一 种 对 自我 意志 的 考验 :每 次 去 Target, 虽 然 计划 就 买 几 件 ， 
但 不 知 怎么 地 , 却 往往 买 得 更 多 。Target 太 善于 挑 起 消费 者 的 购买 僻 了 ,以 至 于 有 这 么 一 则 笑话 ( 见 
图 9-1 )。 据 说 不 在 Target 里 花 上 至 少 100 美元 ， 你 是 出 不 来 的 。 

典型 的 Target 购物 流程 往往 如 此 : 原本 可 能 只 想 买点 生活 日 用 品 ， 比 如 洗 发 水 、 牙 育 和 卫 
生 纸 等 ， 这 大 约会 花费 30 美元 。 然 而 到 了 Target， 你 会 看 到 一 些 很 不 错 的 东西 ， 那 也 许 是 用 在 
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浴室 中 的 新 型 皂 液 器 、 相 框 、 某 种 晴 烛 ， 或 是 一 篮子 什锦 干果 等 物 。 你 会 发 现 这 些 东 西 的 价格 
看 起 来 很 合理 。 你 安慰 自己 道 :“ 哦 ， 才 5.99 美元 。” 然 后 把 东西 扔 进 了 购物 车 。 反 复 几 次 之 后 ， 
最 后 结账 时 ， 你 肯定 会 对 140 美元 的 账单 大 吃 一 惊 :“ 怎 么 会 花 这 么 多 钱 ? ”事实 已 经 如 此 ， 你 
只 好 为 所 有 挑选 的 东西 买单 一 一 即使 原本 没 想 要 花 这 么 多 钱 。 


图 9-1 
Target 很 善于 让 你 掏 Today Itook the get challenge (leave 
腰包 ， 图 中 是 一 则 笑 without spe: $100) and failed 

话 1 

转载 已 获 Elaine Ellis 
许可 








Target 百货 有 很 多 这 种 手段 ， 让 你 一 次 又 一 次 地 重 蹈 覆 为 。 他 们 对 店面 布局 、 产 品 供应 ， 
乃至 定价 心理 学 都 进行 了 深入 研究 ， 但是， 其 中 最 简单 实用 的 一 个 因素 就 是 Target 商标 的 颜色 : 
红色 。 有 研究 表明 ， 红 色 在 某 些 情况 下 ,可 以 降低 人 分 析 判 断 并 作出 明智 决定 的 能 力 ， 所 以 每 
个 Target 门店 从 地 板 到 天 花 板 都 流 消 着 红色 。 


9.3.1 红色 对 大 脑 的 影响 


罗 彻 斯 特大 学 的 Andrew J Elliot 和 药 尼 黑 大 学 的 Markus A. Maier 两 人 各 自 进行 的 研究 都 揭 
示 了 红色 的 魔力 - 他 们 发 现 ， 红色 可 以 让 大 脑 内 的 功能 执行 中 心 超 负 荷 运转 ， 从 而 难以 做 出 理 
性 判断 。 另 外 ， 红 色 最 奇妙 之 处 还 在 于 ， 你 根本 察觉 不 到 它 所 产生 的 影响 。 

Elliot 和 Maier 对 参与 者 进行 了 一 系列 认 知 能 力 的 测试 实验 ， 比 如 字迹 拼图 ( 将 字母 重新 排 
列 组 成 单词 ) 或 者 智商 测试 。 参 与 者 之 间 唯一 的 区 别 就 是 ,他们 处 在 不 同 的 色彩 环境 当中 : 红色， 
绿色 或 灰色 。 

参与 者 在 其 中 一 项 研究 中 接受 智商 测试 。 一 些 参与 者 收 到 了 红色 封面 的 测试 手册 ， 而 另 一 
些 收 到 的 则 是 绿色 或 者 灰色 封面 。 

然后 ,EEG( 脑 电 图 描记 器 ) 读 取 受 测 者 的 大 脑 活动 。 结 果 表 明 ,那些 拿 了 红色 封面 的 参与 者 ， 
其 大 脑 前 额 叶 皮质 的 活动 要 比 收 到 绿色 或 灰色 封面 的 参与 者 更 为 活跃 。 


9.3.2 ”前 额 叶 皮层 与 理性 思考 


前 额 叶 皮层 被 认为 是 大 脑 中 负责 执行 功能 的 器 官 。 所 以 , 仅 是 拿 着 红色 封面 的 册子 ， 受 测 
者 就 突然 缺少 了 足够 的 可 用 认 知 资源 ， 无 法 明辨是非 与 努力 实现 既定 目标 ， 也 无 法 牺牲 眼前 利 
益 以 换取 长 期 回报 ,或 者 也 展现 不 出 社交 掌控 能 力 以 及 对 冲动 的 抑制 力 。 

前 额 叶 皮层 被 认为 是 大 脑 中 赋予 我 们 感知 能 力 ， 使 我 们 有 别 于 其 他 动物 的 部 分 。 在 最 近 
五 百 万 年 人 类 进化 历程 中 ,前 额 叶 皮层 的 进化 速度 是 大 脑 其 他 部 分 的 两 倍 。 无 论 是 前 额 叶 皮 层 
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容积 的 减 小 ， 还 是 其 连接 神经 的 减少 ， 都 可 能 会 引起 多 动 症 (ADHD )、 犯 罪行 为 和 药物 成 瘾 。 
因此 ,通过 分 发 红色 封面 的 测试 手册 ， 实 际 上 Elliot 和 Maier 是 让 受 测 者 患 上 了 ADHD， 将 他 
们 变 成 了 动物 。 

从 受 测 者 的 行为 表现 中 可 以 看 出 这 种 执行 功能 的 减弱 是 非常 明显 的 。 这 些 受 测 者 会 表现 出 
一 些 与 积极 性 相关 的 逃避 行为 。 在 选择 测试 问题 时 ， 拿 红色 封面 测试 手册 的 这 组 受 测 会 
挑选 相对 更 容易 的 题目 。 受 测 者 通过 身体 语言 表达 了 这 种 逃避 行为 ， 连 接受 测 者 的 传 感 
持 有 红色 封面 试题 的 这 部 分 受 测 者 身体 离 手册 要 比 其 他 受 测 者 更 远 一 些 。 而 最 终结 果 显 示 ， 他 
们 的 智商 测试 得 分 也 要 比 那些 拿 有 绿色 或 灰色 封面 测试 手册 的 受 测 者 要 低 
显然 ,仅仅 只 是 封面 色彩 是 红 的 , 受 测 者 就 已 感 得 铠 慌 。 他 们 的 前 额 叶 皮 质 会 因此 而 超 负荷 ， 
导致 无 法 执行 类 似 智商 测试 之 类 的 复杂 任务 。 其 实在 潜意识 里 ， 他 们 能 意识 到 自己 的 表现 受到 
了 障碍 ( 所 以 才 会 有 逃避 的 肢体 且 倾向 于 选择 简单 题目 )， 但 在 要 求 他 们 对 自己 的 表现 
进行 自我 评价 时 ， 他 们 对 此 却 丝 毫 没 有 意识 逃避 行为 ， 大 脑 的 反应 ， 以 及 表现 受 
阻 一 一 这 一 切 都 是 在 无 意识 的 情况 下 发 生 的 ， 他 们 认为 自己 的 表现 与 其 他 受 测 者 没什么 两 样 






















9.3.3 ” 闭 击 前 额 叶 皮层 


如 果 Elliot 和 Maier 的 研究 结果 在 日 常生 活 中 也 适用 ， 那 么 我 们 之 所 以 会 在 Target 卖场 内 难 
以 控制 支出 也 就 很 好 理解 了 。 每 当 走 进 Target 百货 ， 无 处 不 在 的 红色 就 开始 侵袭 你 的 大 脑 前 额 
叶 皮层 ( 见 图 9-2 )。 百 货 商 店 的 门 是 红色 的 ， 购 物 车 是 红色 的 ， 付 款 通道 还 是 红色 的 。 一 进入 
Target 百货 ， 你 眼中 就 充满 了 红色 ， 这 将 耗 尽 你 前 额 叶 皮 层 内 的 可 用 资源 





| 内 外 都 被 红色 包围 的 Target 商店 

上 图 : Jay Reed 摄 (http://www.flickr.com/people/jreed/ ) 
下 图 : Patrick Hoesly 摄 (http;//www.flickr.com/people/ 
zooboing/ ) 
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在 Target 购物 最 让 人 意外 的 是 ,结账 时 的 总 价 似 乎 永远 讲 不 通 。 这 包 警 片 只 要 3.87 美元 ， 
那 管 效果 奇特 的 美白 牙膏 才 5.64 美元 ， 好 看 的 相框 也 只 不 过 才 16.99 美元 ， 怎 么 会 一 下 子 花 掉 
那么 多 钱 ， 没 道理 啊 。 这 可 能 是 因为 在 被 红色 笼 单 着 的 Target 卖场 里 ， 你 的 数学 运算 能 力 就 变 
差 了 。 这 也 合情合理 ， 毕 竟 在 Elliot 和 Maier 的 研究 中 ， 手 持 红色 封面 测试 手册 的 受 测 者 在 智商 
测试 时 的 确 表 现 不 佳 。 


9.3.4 “前额 时 皮层 与 决策 


前 额 叶 皮层 发 生 超 负荷 运转 ， 不 只 会 让 你 的 数学 运算 能 力 变 差 ， 而 且 还 会 影响 到 决策 能 力 ， 
使 你 跟着 情绪 走 而 不 是 进行 理性 判断 。 

斯 坦 福 大 学 的 Baba Shiv 教授 的 一 项 研究 表明 ， 前 额 叶 皮 质 超 负荷 运转 的 受 测 者 往往 很 情 
绪 化 ， 很 难 做 出 正确 决定 。 实 验 中 受 测 者 被 要 求 记 住 一 串 数字 。 受 测 者 被 分 为 两 组 :其 中 一 组 
要 求 记 住 一 个 2 位 数字 ， 而 另 一 组 则 要 求 记 住 一 组 7 位 数字 。 然 后 受 测 者 们 被 告知 要 经 过 走廊 ， 
去 男 一 个 房间 向 研究 员 重 述 这 串 数 字 。 

充分 的 研究 表明 ， 人 们 很 难 立刻 记 住 7 位 数字 。 这 也 是 为 什么 电话 号 码 要 被 划分 成 3 位 和 
4 位 数字 一 组 的 原因 ， 这 一 般 被 称 为 分 块 ( 确实 是 一 种 很 贴切 的 说 法 )。 因 此 ， 那 些 需要 记 住 7 
位 数 的 受 测 者 就 得 更 努力 ， 他 们 必须 将 大 脑 的 短 时 记忆 能 力 发 挥 到 极限 ， 才 能 记 住 这 串 数字 。 

如 果 受 测 者 试图 记 住 自己 的 数字 ， 他 们 的 短 时 记忆 能 力 通常 认为 是 由 前 额 叶 皮层 来 处 理 
的 ) 就 会 超 负荷 运行 。 他 们 很 可 能 会 在 脑海 中 重复 这 些 数字 ， 来 保证 穿 过 走廊 后 还 能 记得 它们 。 
显然 这 对 只 需要 记 住 2 位 数字 的 受 测 者 来 说 ， 就 太 简单 了 

但 是 ， 作 为 实验 的 一 部 分 ， 这 些 受 测 者 会 在 走廊 中 被 另 一 位 研究 员 打 断 。 他 会 为 这 些 受 测 
者 提供 两 种 小 吃 作为 参与 研究 的 奖励 : 一 大 块 巧克力 蛋糕 和 一 碗 水 果 沙 拉 ， 不 健康 饮食 和 健康 
饮食 两 种 选择 。 

鉴于 此 前 我 们 业已 了 解 到 前 额 叶 皮层 以 及 前 额 叶 皮层 超 负荷 运转 时 人 们 的 表现 ， 自 然 我 们 
也 就 对 那些 需要 记忆 长 串 数字 的 受 测 者 所 作出 的 选择 毫 不 吃惊 : 他 们 当中 选择 巧克力 蛋糕 的 人 
数 比 那些 只 需 记 住 2 位 数 的 人 要 高 0% 。 他 们 的 选择 不 太 明智 、 不 太 理性 ， 而 且 很 情绪 化 。 

当然 ， 即 使 Target 百货 明天 开始 停止 使 用 红色 ， 它 仍然 会 屹立 不 倒 。Target 百货 很 擅长 支 
配 消费 者 的 行为 ， 他 们 总 会 在 合理 价格 下 设计 出 恰到好处 的 产品 ， 但 鉴于 红色 对 大 脑 的 影响 ， 
它 的 作用 也 是 不 容 忽 视 的 。 


9.3.5 ”色彩 和 情境 


Elliot 和 Maier 的 智商 测试 和 在 Target 百货 中 购物 存在 着 一 个 很 大 的 区 别 ， 那 就 是 情境 。 色 
彩 的 含义 以 及 我 们 对 色彩 的 反应 也 不 例外 ， 都 会 因 情 境 而 异 。 例 如 从 进化 论 的 角度 来 看 红色 的 
作用 。Elliot 和 Maier 的 研究 发 生 在 注重 绩效 的 情境 下 。 受 测 者 是 在 可 能 遭受 失败 结果 的 情境 中 
看 到 红色 的 。 从 进化 的 角度 来 看 ， 在 这 种 情境 下 红色 会 产生 巨大 的 作用 ， 因 为 高 举 酮 、 高 等 级 
的 对 手 可 能 是 面红耳赤 的 ， 这 也 是 危险 的 信号 。 或 许 ， 这 就 能 解释 ， 为 什么 停止 标志 、 禁 止 人 
内 标志 和 消防 车 往往 都 是 红色 的 。 


第 9 章 色彩 理论 


但 在 其 他 环境 下 ， 红 色 可 能 有 着 不 同 的 含义 和 影响 作用 。 在 浪漫 的 环境 中 ， 红 色 可 能 会 和 
有 魅力 或 者 兴奋 的 伴侣 那 发 红 的 皮肤 关联 起 来 。 这 也 许 就 能 解释 ,为 什么 大 多 数 口红 都 是 红色 调 
而 且 每 家 店铺 都 会 在 情人 节 前 后 摆 放 红色 的 卡片 、 礼 物 和 鲜花 。 

同时 ， 红 色 也 被 大 量 应 用 在 快餐 店 商标 上 。 人 必胜客、 麦当劳、 肯德基、In-N-Out 以 及 福来 
鸡 使 用 的 商标 几乎 都 是 全 红色 的 。 在 有 食物 的 环境 下 ， 红 色 可 能 会 和 豪 饪 的 火苗 或 者 狩猎 而 来 
的 新 鲜 食材 中 的 血液 联系 在 一 起 。 你 几乎 看 不 到 使 用 蓝 色 商标 的 食品 公司 ， 正 如 在 天 然 食 材 中 
几乎 看 不 到 蓝 色 一 样 ( 除非 食物 变质 并 布 满 了 霉菌 )。 

红色 很 少 被 用 在 银行 的 商标 上 。 美 国 银行 和 美洲 银行 在 他 们 的 商标 上 都 用 到 了 红色 ， 但 是 
他 们 的 用 色 是 基于 美国 国旗 的 红 白 蓝 三 色 ， 带 有 一 定 的 爱国 情调 。 大 多 数 银行 或 者 金融 机 构 在 
它们 的 Logo 中 会 使 用 蓝 色 或 者 绿色 ， 因 为 蓝 色 被 认为 具有 镇 定 作 用 ， 而 绿色 无 疑 是 和 金钱 、 成 
功 这 些 概 念 有 关 。 大 通 、 美 联 银行 、 美 国贸 易 控股 公司 和 花旗 银行 都 将 绿色 或 者 蓝 色 作 为 它们 
商标 中 的 主 色调 。 虽 然 在 银行 商标 中 红色 并 不 是 完全 绝迹 ， 但 它 的 使 用 通常 仅 限于 很 小 的 “ 特 
征 ” 区 域内 。 任 何在 股票 投资 组 全 或 者 银行 账户 中 看 到 过 红色 数字 的 人 都 知道 , 当 涉 及 到 金钱 时 ， 
红色 可 不 是 什么 好 颜色 。 

对 于 红色 的 使 用 情境 ， 无 论 是 在 Elliot 和 Maier 的 研究 环境 下 也 好 ， 还 是 在 浪漫 的 环境 以 及 
与 食物 相关 的 环境 中 也 好 ， 可 以 肯定 的 一 点 是 ， 红 色 具 有 令 人 兴奋 的 作用 ， 它 会 降低 我 们 推理 
的 能 力 , 并 且 ( 至 少 有 那么 一 点 ) 可 以 激 起 我 们 的 动物 性 。 很 多 人 都 会 为 当初 的 感情 追求 而 后 悔 ， 
或 控制 不 住 对 垃圾 食品 的 热爱 。 红 色 是 所 有 色彩 中 最 强大 的 色彩 ， 所 以 要 理智 地 使 用 它 。 


9.3.6 ”这 对 你 意味 着 什么 


那么 ， 如 何 运用 新 学 到 的 红色 知识 ， 让 你 的 设计 更 优秀 ”以 下 是 几 种 参考 方法 。 

口 在 你 促使 用 户 做 出 进一步 行动 的 情境 中 使 用 红色 。 如 果 你 想 突 显 特卖 的 价格 ， 类似 “ 立 
即 购买 ”这 样 的 行动 召唤 按钮 ,或 者 交易 即将 结束 的 倒计时 时 钟 ,红色 会 营造 一 种 紧迫 感 ， 
并 暗示 你 的 用 户 采 取 行 动 。 

口 在 错误 信息 以 及 其 他 紧急 事项 中 使 用 红色 。 红 色 会 起 到 提醒 用 户 的 快速 警示 效果 ， 并 且 
突出 消息 的 重要 性 。 

口 如 果 设计 和 食物 相关 ， 可 以 考虑 使 用 红色 。 红 色 和 食物 相关 ， 而 且 很 多 食品 公司 和 餐馆 
运用 红色 的 效果 都 不 错 。 无 论 如 何 都 应 该 避免 在 这 种 环境 下 使 用 蓝 色 一 一 它 被 认为 会 抑 
制 食欲 。 

口 在 基于 绩效 的 环境 中 应 避免 使 用 红色 。 如 果 你 在 设计 一 个 测试 软件 ， 红 色 可 能 会 干扰 用 
户 的 测试 成 绩 - 


9.4 其 他 颜色 的 研究 


迄今 为 止 ， 除 了 红色 已 被 研究 证 实 能 对 人 类 产生 生理 影响 之 外 ， 鲜 有 证 据 证 明 其 他 任何 一 
种 颜色 也 会 对 人 类 产生 生理 影响 。 然 而 ， 研 究 也 发 现 ， 在 不 同 的 环境 下 ， 某 些 特定 颜色 对 人 有 
着 一 定 的 影响 效果 。 
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英 属 哥伦比亚 大 学 一 项 研究 发 现 ， 蓝 色 能 够 提高 创意 性 工作 的 绩效 ， 而 且 如 果 广告 是 蓝 色 
调 的 ， 参 与 者 会 偏爱 更 具 创意 的 产品 广告 。 

康 奈 尔 大 学 另 一 研究 表明 ，NFL ( 国家 橄榄 球 联盟 ) 和 NHL ( 全 国 曲棍球 联合 会 ) 中 穿 黑 
色 队 服 的 球 队 往 往 被 评 为 更 插 劣 更 好 斗 的 球 队 。 这 一 发 现 可 以 用 足够 的 想 罚 码 和 被 罚 下 场 时 间 
来 证 明 。 他 们 解释 说 黑色 与 死亡 和 收 严 有 关联 。 在 运动 情境 下 ， 这 也 许 是 真 的 , 但 据说 女人 一 
般 不 也 是 会 迷恋 “高 大 、 神 秘 而 且 英俊 ”的 男士 吗 ? 还 有 那 种 挪 痊 ， 说 只 要 男人 穿 上 晚 礼 服 ， 
就 会 显得 潇 酒 俊朗 吗 ?虽然 黑色 在 某 种 环境 下 可 能 会 和 侵略 ,邪恶 联系 在 一 起 ,但 在 其 他 环境 下 ， 
它 转 而 又 会 与 沉着 老练 、 高 档 奢 华 以 及 令 人 着 迷 等 关键 词 关联 起 来 。 

任何 颜色 都 不 会 在 所 有 环境 中 只 有 一 种 明确 的 影响 作用 。 我 们 对 颜色 的 反应 取决 于 运用 颜 
色 的 环境 、 个 人 经 历 ， 以 及 所 在 地 的 文化 背景 。 


9.5 ”颜色 和 文化 


我 们 从 祖先 那里 继承 来 的 对 色彩 的 先天 反应 ， 被 文化 及 文化 间 的 相互 交流 所 塑造 和 定型 。 
色彩 的 文化 意义 是 多 种 因素 综合 作用 的 产物 ， 这 其 中 包括 有 : 获取 某 种 色彩 颜料 的 可 能 性 、 当 
地 动 植物 的 色彩 ， 或 者 看 似 怪诞 的 色彩 选择 方式 。 

下 面 是 一 些 色彩 在 文化 中 与 某 些 事物 形成 关联 的 趣闻 轶 事 。 

口 在 中 世纪 的 欧洲 ， 由 于 用 在 蓝 色 染 料 中 的 群 青色 颜料 非常 昂贵 ， 于 是 宝蓝 色 服饰 是 富裕 

阶层 的 象征 ， 而 普通 人 则 多 穿 绿 色 和 棕色 服装 。 
口 在 很 多 东方 文化 中 ,橙色 都 有 着 特殊 的 意义 ， 这 很 可 能 要 归 因 于 藏 红 花 的 重要 性 。 藏 红 
花 是 一 种 昂贵 的 香料 ， 有 着 悠久 的 药 用 历史 。 藏 红 花 橙色 被 用 在 印度 的 国旗 上 ， 在 印度 
教 中 也 备 受 推崇 ， 而 且 是 上 座 部 佛教 僧 徒 所 披 架 效 的 色彩 。 

口 在 美国 黄色 经 常会 和 出 租车 联系 在 一 起 , 这 可 能 要 归功 于 1915 年 在 芝加哥 成 立 的 Yellow 
Cab Company。 据 说 公司 创始 人 John D. Hertz 选择 黄色 汽车 作为 出 租车 是 因为 芝加哥 大 
学 的 研究 表明 ， 黄 色 是 在 远 处 最 容易 被 发 现 的 色彩 。 

口红 色 在 国旗 中 十 分 常见 ， 通 常 象征 的 是 勇气 或 者 牺牲 将 士 鲜血 。 

要 列 出 世界 上 所 有 文化 中 所 有 色彩 的 含义 是 不 可 能 的 ， 而 且 这 样 做 也 没有 意义 。 但 如 果 你 
在 为 一 种 不 熟悉 的 文化 做 设计 ， 或 者 在 做 拥有 国际 化 受众 的 设计 时 .那么 最 好 在 运用 色彩 之 前 ， 
研究 下 特定 文化 下 的 重要 色彩 。 

当 为 陌生 文化 做 设计 时 ， 谨 慎 选 择 色 彩 就 像 在 育 会 上 和 刚刚 认识 的 人 交谈 一 样 。 你 不 能 表 
达 出 强烈 的 政治 观点 或 者 宗教 信仰 ， 或 者 让 人 联想 到 死亡 或 者 悲伤 。 在 研究 特定 文化 下 的 色彩 
含义 时 ， 要 考虑 到 文化 中 那些 带 有 强烈 、 极 端 趋势 的 事物 。 因此， 要 问 : 

口 这 个 国家 或 者 地 区 的 国旗 是 什么 色彩 的 ? 

口 占 主导 地 位 的 宗教 是 什么 ? 和 这 个 宗教 相关 的 色彩 又 是 什么 ? 

口 在 这 种 文化 中 婚礼 穿 哪 种 色彩 ? 葬礼 或 者 其 他 宗教 仪式 呢 ? ( 尝试 搜索 图 片 )。 

口 在 这 种 文化 中 有 哪些 流行 的 节日 。 而 哪些 色彩 和 它们 相关 ?如 果 你 的 设计 成 果 会 出 现在 

某 个 节日 季 当 中 ， 那 这 个 问题 将 特别 重要 。 
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口 在 这 种 文化 中 有 哪些 重要 的 运动 项 目 y” 有 哪些 杰出 或 者 敌对 运动 队 ， 而 且 它们 一 般 采 用 
什么 色彩 ? 

例如 ， 虽 然 红色 在 某 些 环境 下 带 有 一 些 强烈 的 影响 效果 ,但 在 美国 ， 当 与 白 蓝 两 色 搭配 时 ， 
得 到 的 配色 方案 看 起 来 有 点 突出 美国 爱国 主义 ， 而 且 也 可 能 会 和 类 似 阵 亡 将 士 纪 念 日 或 者 独立 
日 这 样 的 节日 联系 起 来 -这 要 取决 于 所 处 的 时 间 点 。 橙 色 对 于 万 圣 节 期 间 的 内 布 拉 斯 加 州 的 
观众 来 说 意义 有 所 不 同 ， 因 为 这 段 时 间 他 们 的 高 校 橄榄 球 队 恰巧 和 得 克 萨 斯 大 学 长 角 牛 队 有 
比赛 "。 

通过 对 陌生 文化 的 研究 ， 你 会 得 到 一 些 与 特定 文化 相关 联 的 色彩 含义 ， 进 而 使 设计 产品 能 
够 更 好 地 实现 本 地 化 


9.6 配色 和 色 轮 


几 个 世纪 以 来 ， 为 了 解 色彩 之 间 的 相互 作用 方式 ， 以 及 开发 指导 色彩 使 用 的 框架 ， 人 们 进 
行 过 无 数 的 试验 。 早 在 文艺 复兴 时 期 ， 油 画家 就 试图 寻找 能 创造 任何 色彩 的 完美 颜料 组 合 。 
于 制作 颜料 是 一 项 劳动 密集 型 工作 ， 而 且 会 用 到 一 些 昂贵 的 原料 ， 所 以 比较 经 济 的 方式 是 尽 可 
能 少 地 从 不 多 的 颜料 中 创作 出 更 多 的 色彩 。 由 此 ， 便 诞生 了 现在 流行 的 著名 艺术 家 色 轮 。 

艺术 家 色 轮 将 红 黄 蓝 这 3 种 色彩 确定 为 三 原色 。 几 个 世纪 以 来 ， 艺 术 家 们 使 用 这 3 种 颜料 
创作 出 了 几乎 所 有 想 要 的 色彩 ， 因 此 所 有 的 色彩 都 被 认为 来 自 这 三 原色 。 

可 能 在 幼儿 园 时 期 ， 你 就 学 过 红色 和 黄色 会 生成 橙色 ， 黄 色 和 蓝 色 生 成 绿色 ， 而 蓝 色 和 红 
色 生 成 紫色 。 这 些 由 任意 两 种 原色 混合 而 得 来 的 色彩 ， 被 称 为 次 生 色 

在 第 8 章 中 我 们 了 解 到 ， 人 类 可 以 分 辨 大 约 一 千 万 种 色彩 ， 所 以 我 们 当然 不 能 止步 于 原色 和 次 
生 色 。 如 果 你 将 某 种 原色 和 相近 的 次 生 色 混合 ,就 得 到 了 另 一 组 被 称 为 三 次 色 的 色彩 。 

原色 、 次 生 色 和 三 次 色 ， 这 些 色 彩 一 起 组 成 了 传统 的 艺术 家 色 轮 ， 如 图 9-3 所 示 。 从 技术 
上 来 说 ， 艺 术 家 色 轮 可 能 并 不 科学 正确 。 正 如 在 现代 印刷 技术 中 发 现 的 ， 蓝 绿色 、 品 红色 和 黄 
色 油 墨 ( 而 不 是 红 黄 蓝 三 色 ) 几乎 可 以 混合 出 光学 上 的 任何 一 种 色彩 ， 而 且 在 第 8 章 我 们 还 了 
解 到 ， 红 绿 蓝 三 色光 可 以 形成 更 宽广 的 色 域 


图 9-3 
传统 的 艺术 家 色 轮 





中 西方 每 年 10 月 31 日 的 万 圣 节 的 主 色调 是 榨 色 ， 而 得 克 萨 斯 大 学 长 角 牛 队 的 队 微 、 服 饰 也 是 橙色 的 。 作 者 意思 是 
原本 在 万 圣 节 期 间 代表 喜庆 的 橙色 ， 会 因为 橙色 橄 模 球 对 手 的 出 现 而 变 得 充满 敌意 。 一 一 译 者 注 
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也 许 艺术 家 色 轮 并 不 是 建立 在 精确 的 科学 基础 之 上 ， 但 是 围绕 着 它 形成 了 伟大 的 知识 系统 
和 理论 体系 。 无 数 成 功 的 艺术 家 和 设计 师 都 是 从 这 种 色 轮 开始 接受 启蒙 教育 的 。 另 外 ， 大 多 数 
创作 配色 方案 的 工具 都 从 这 个 色 轮 中 汲取 了 知识 。 所 以 ,虽然 很 可 能 有 人 会 系统 科学 地 重建 艺 
术 家 色 轮 以 及 相关 色彩 理论 ， 但 我 不 会 那么 做 。 


9.7 选 色 和 Web 设计 约定 


在 Web 设计 中 ,已 经 有 了 一 些 既 定 的 色彩 选择 标准 和 模式 。 以 下 是 一 些 Web 中 常见 的 色彩 
使 用 模式 。 


9.7.1 背景 


设计 中 最 具 影响 力 的 色彩 选择 ， 就 是 网 站 或 者 应 用 程序 背景 色 的 选择 。 选 择 背 景色 就 像 选 
择 打印 简历 的 纸张 质地 。 亮 白色 、 桃 红色 或 者 奶油 色 的 纸张 对 简历 都 有 着 各 自 的 影响 ， 而 且 会 
产生 直接 的 印象 。 同 理 ， 网 站 中 不 同 的 背景 色 也 是 一 样 。 


1. 白 色 

毫 无 疑问 ， 以 白色 为 主要 背景 色 的 Web 设计 是 最 常见 的 。 大 多 数 人 习惯 阅读 印刷 在 白 纸 上 
的 读物 ， 比 如 报纸 或 者 杂志 。 白 色 背 景 与 黑色 字体 在 一 起 ， 为 阅读 营造 了 很 好 的 对 比 度 ， 而 且 
传递 出 一 种 可 信 的 感觉 。 在 西方 文化 中 ， 白 色 象 征 着 纯洁 、 干 净 和 无 率 。 虽 然 在 一 些 东 方 文化 
中 ， 比 如 印度 和 中 国 ， 通 常 在 莫 礼 中 穿着 白色 ,但 在 这 些 国家 的 流行 网 站 中 仍然 使 用 白色 背景 。 
Guruji ( 印度 的 搜索 引擎 ) 和 百度 ( 中 国 的 搜索 引擎 ) 都 使 用 白色 背景 。 

受众 越 广泛 的 网 站 ， 越 可 能 使 用 白色 背景 。 白 色 会 被 看 作 是 电子 商务 网 站 的 标准 配色 ， 而 
且 最 好 不 要 怀疑 这 个 标准 。 


2, 灰白 色 

未 经 漂白 的 纸 自 然 呈现 灰白 色 、 奶 油 色 ， 所 以 灰白 色 在 Web 上 也 很 受 欢迎 ， 尽 管 在 拥有 广 
泛 受 众 的 高 访问 量 网 站 ( 比如 电子 商务 网 站 ) 中 不 经 常 应 用 这 种 色彩 。 通 常 ， 人 们 会 将 灰白 色 
或 者 奶油 色 和 带 有 天 然 感觉 的 事物 联系 在 一 起 。 此 外 ， 灰 白色 或 者 奶油 色 会 给 人 一 种 比 纯 白 色 
更 强烈 的 亲密 感 。 而 且 灰白 色 给 人 一 种 古 香 古 色 的 感觉 ， 就 像 陈 年 开始 泛 黄 的 纸张 。 灰 白色 背 
景 可 能 适合 园林 设计 公司 网 站 、 历 史 小 说 网 站 、 或 者 优质 的 陈 年 威士忌 网 站 


3. 深 色 

成 功 的 电子 商务 网 站 很 少 使 用 深 色 背景 ， 但 这 并 不 意味 着 不 能 使 用 深 色 背 景 。 深 色 背 景 会 
让 访问 者 想起 市 中 心 那 有 趣 的 夜生活 ， 这 也 是 为 什么 经 常 在 餐馆 和 夜总会 的 网 站 上 看 到 深 色 背 
景 。 通 常 ， 在 Web 设计 师 甚 至 时 装 设计 师 的 网 站 上 也 能 看 到 深 色 背景 。 因 为 深 色 背景 可 以 带 来 
高 档 奢华 、 温 文 尔 雅 的 感觉 。 
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4. 亮色 

类 似 黄色 、 粉 色 或 者 蓝 绿色 这 样 的 亮色 背景 肯定 会 对 设计 产生 一 定 影响 ， 但 不 一 定 总 是 
好 的 影响 。 如 果 选 择 使 用 亮色 背景 ， 一 定 要 确保 它 是 切 题 的 。 但 在 需要 强烈 的 视觉 冲击 力 ， 而 
且 内 容 精炼 的 网 站 醒目 页 面 上 ,亮色 背景 仍 是 不 二 的 选择 

图 9-4 所 示 的 TXP Mobile 网 站 ( www.txpmobile,com )， 就 是 
子 。 网 站 中 的 信息 比较 简短 ， 其 唯一 目的 是 要 告知 一 些 产品 信 
在 网 站 上 阅读 较 多 的 信 








一 个 运用 亮色 背景 非常 得 当 的 例 
， 并 让 人 去 下 载 它们 。 如 果 需 要 
息 , 那 么 亮 黄色 背景 就 有 点 过 了 ,但 是 在 当前 情况 下 , 亮 黄色 背景 恰到好处 。 





9-4 

亮色 背景 会 分 散人 的 
注意 力 , 但 TXPMobile 
网 站 上 较 短 的 文字 内 
容 让 黄色 背景 恰 到 好 
处 , 极 具 吸引 力 

图 片 复制 已 获 Oliver Ker 
许可 








9.7.2 ”图像 与 文本 








就 像 交 通 标 志 有 设计 标准 一 样 ，Web 设计 同样 也 有 标准 一 一 尽管 这 些 标准 可 能 都 是 非 官方 
的 。 因 为 每 个 网 站 的 使 用 模式 都 有 一 些 相似 之 处 ， 所 以 就 出 现 了 一 些 运用 色彩 的 常用 方法 。 此 
外 ， 界面 设计 通常 会 利用 为 人 熟知 的 文化 暗示 和 隐喻 来 与 用 户 沟通 ( 比如 “桌面 ”或 者 “垃圾 
桶 ”的 设计 隐喻 )。 了 解 Web 中 的 色彩 应 用 模式 , 有 助 于 制定 决策 , 并 帮助 实现 清晰 的 用 户 沟通 。 
以 下 是 Web 设计 中 的 一 些 常见 色彩 用 法 


1. 绿色 

绿色 通常 作为 进度 标志 出 现在 网 站 上 。 有 很 多 图 标 以 及 界面 元 素 常 用 绿色 显示 。 产品 对 比 
图 表 中 常 使 用 绿色 的 选中 标记 ， 以 显示 产品 的 某 一 特性 。 表 示 某 个 动作 成 功 完成 的 消息 通常 显 
示 为 绿色 。 绿 色 也 是 行动 指令 按钮 的 流行 色彩 ， 而 且 有 时 测试 结果 优 于 其 他 色彩 。 当 然 ， 红 色 
的 使 用 效果 也 不 错 ( 见 图 9-5 )。 
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图 9-5 

绿色 通常 被 用 于 表示 [ ==- ] 

进度 或 者 成 功 的 环 

填 下 re em designforhackers@gmail.c, on 











2. 黄色 

由 于 我 们 大 多 数 人 习惯 于 在 某 些 情 况 下 使 用 黄色 荧光 笔 加 亮 书 中 重要 的 内 容 ， 所 以 在 网 站 
设计 中 常用 黄色 引起 用 户 对 重要 信息 或 者 重要 提示 的 注意 。 浏 览 视频 时 ，YouTube 会 使 用 黄色 
提醒 你 这 段 视频 是 非 公开 的 。Basecamp 项 目 管理 软件 在 注册 表单 中 ， 使 用 浅黄 色 背 景 进行 重要 
提示 。Google 在 Gmail 等 类 似 产 品 中 ,使 用 黄色 背景 高 亮 显示 重要 信息 。 

黄色 还 经 常 和 打折 、 特 惠 以 及 价格 联系 在 一 起 。 亚 马 逊 网 站 使 用 黄色 的 财宝 箱 图 标 突显 “ 今 
日 特惠 "， 它 的 评分 系统 使 用 的 星星 是 黄色 的 ， 而 且 产品 页 面 的 行动 指令 按钮 也 是 黄色 的 。eBay 
使 用 橘 黄色 的 徽章 来 标示 出 “最 受 欢迎 ”的 卖家 。Google 关键 字 的 最 高 价 投标 人 的 广告 中 显示 
浅黄 色 背 景 的 特权 ( 见 图 9-6 )。 


天 Es | 
黄色 通常 被 用 于 加 亮 SE = 一 
重要 的 信息 ， 或 者 标 So 


识 出 特别 的 事物 上 ep | 
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3. 红色 

当 Web 中 有 错误 信息 或 者 其 他 紧急 信息 出 现时 ， 通 常会 使 用 红色 来 标注 。 比 方 说 ， 大 多 数 
表单 用 红色 来 显示 错误 信息 。 红 色 也 可 以 很 好 的 表达 一 些 迫 切 的 销售 信息 。eBay 使 用 红色 来 表 
示 即 将 结束 的 拍卖 活动 ， 而 亚马逊 使 用 红色 显示 折 后 价 。 分 析 公司 Performable 通过 测试 发 现 ， 
使 用 红色 行动 指令 按钮 的 效果 要 比 用 绿色 好 21%。 不 过 ， 应 该 注意 的 是 ，Performable 公司 商标 
中 的 主 色 是 绿色 ， 所 以 红色 与 其 对 比 效果 非常 明显 。( 见 图 9-7 ) 

















Time left: 1m 55s (Apr 08, 2011 17:40:19 PDT) 图 9-7 
红色 通常 用 于 显示 发 
生 的 错误 , 紧急 信息 ， 
Price: $26.99 & this item ships for FREE with Super Saver | ”或 者 迫切 需要 用 户 动 
Shipping. Details 作 的 地 方 


You Save: $13.00 (33%) 
Pre-order Price Guarantee. Learn more. 











Username 


| 


This Is what you'l use to sign in, 


Password 


| 


6 characters or longer with at least one number ls safest. 





4. 蓝 色 

蓝 色 是 Web 中 链接 文本 的 标准 色 一 一 一 些 Web 设计 师 甚至 外 拒绝 使 用 蓝 色 之 外 任何 其 他 
的 色彩 来 显示 链接 文本 。 可 用 性 专家 Jakob Nielson 在 其 网 站 ( useit.com ) 上 的 一 篇 文章 中 指出 ， 
蓝 色 是 首选 色 ， 但 其 他 色彩 的 效果 “也 很 好 "。 作 为 一 般 的 经 验 法 则 ， 如 果 你 效力 于 某 个 受众 广 
泛 的 高 访问 量 网 站 ,那么 保持 蓝 色 的 链接 样式 可 能 是 最 好 的 选择 。 当 然 也 可 以 使 用 其 他 色彩 ， 
不 过 它们 可 能 更 适合 于 规模 较 小 的 技术 型 网 站 、 低 访问 量 的 博客 、 或 是 美学 设计 比 可 用 性 更 重 
要 的 网 站 。 

在 任何 情况 下 ， 除 非 是 链接 ， 否 则 一 定 要 避免 使 用 蓝 色 文字 。 然 而 ， 有 一 种 情况 是 个 例外 : 
网 站 的 调 色 板 使 用 了 大 量 的 蓝 色 ( 并 且 为 链接 定义 了 另外 的 某 种 色彩 )， 这 样 的 话 ， 蓝 色 文字 显 
然 就 是 设计 的 一 部 分 - 


9.7.3 强调 色 


需要 注意 的 是 ， 以 上 这 些 为 实现 某 一 特定 目标 而 应 用 的 色彩 ， 如 果 不 能 和 周边 的 环境 形成 
反差 ， 其 影响 力 将 会 大 大 减弱 。 比 如 说 ， 在 Performable 网 站 中 红色 指令 按钮 的 效果 更 好 ， 其 中 
的 部 分 原因 就 是 ， 它 能 和 网 站 的 绿色 配色 方案 形成 鲜明 对 比 。 如 果 网 站 的 配色 以 蓝 色 为 主 ， 那 
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么 蓝 色 链 接 也 就 不 怎么 明显 了 。 另 外 ， 试 想 黄色 的 “警报 ”提示 在 TXP Mobile 网 站 上 会 是 什么 
效果 一 一 用 户 根本 就 不 会 注意 到 它 ! 

想 用 色彩 以 某 种 方式 引起 人 们 的 注意 、 发 布 重要 信息 、 或 者 提示 发 生 了 重要 事件 时 ， 需 要 
谨 记 的 是 ， 只 有 当 所 选 色 彩 能 和 其 周边 的 环境 形成 反差 . 才 会 引起 注意 。 


9.8 颜色 的 相互 作用 : 为 什么 莫 奈 从 不 使 用 黑色 


不 少 画 家 对 颜色 以 及 其 相互 作用 方式 相当 痴迷 ， 为 了 更 好 地 理解 颜色 间 的 相互 作用 方式 ， 
研究 他 们 的 作品 会 对 我 们 的 设计 很 有 帮助 。 当 先锋 画家 们 开始 挑战 写实 主义 的 流行 趋势 时 ， 印 
象 派 画家 便 尝试 运用 颜色 ， 将 所 用 介质 的 内 在 特质 暴露 出 来 ， 而 克 劳 德 莫 奈 就 是 印象 派 代表 
画家 之 一 。 

葛 奈 的 画作 具有 活力 和 生命 感 ， 其 作品 凭借 颜色 及 反差 跃然 画布 之 上 ， 但 不 知 何故 ,莫泰 
在 几乎 整个 绘画 生涯 中 ， 总 是 尽量 避免 使 用 黑色 。 通 过 理解 莫 奈 运用 颜色 的 方式 ， 可 以 更 好 地 
了 解 颜色 间 相 互 关 系 ， 进 而 在 设计 中 运用 这 些 知识 表现 出 类 似 的 生命 感 和 深度 感 。 

和 其 他 印象 派 画家 一 样 ， 莫 奈 疯 狂 地 着 迷 于 尝试 不 同 材质 的 颜料 、 画 笔 和 画布 。 所 以 ， 正 
如 像素 阻碍 了 Garamond 字体 在 Web 中 的 应 用 ( 参见 第 3 章 ) 一 样 ， 印 象 派 画家 使 用 的 工具 的 
特性 也 塑造 了 他 们 的 作品 。 油 画 颜料 ( 浓厚 粘 稠 )、 画 笔 ( 仅 是 绑 在 一 根 棍 上 的 一 东 毛 发 ) 的 固 
有 特性 ， 以 及 有 时 画布 本 身 的 质地 ， 都 更 适合 创作 带 有 腊 胱 感 的 画作 ， 而 不 是 当时 盛行 的 写实 
画作 。 现 实 主义 画家 在 努力 掩盖 这 些 介质 的 特性 ， 但 印象 派 画家 却 接受 并 利用 了 这 些 特性 ， 就 
像 像 素 字 体 或 者 位 图 字体 利用 了 像素 的 特性 一 样 。 

在 尝试 的 过 程 中 ， 印 象 派 画家 必须 尝试 用 颜色 创作 出 所 需 的 效果 。 就 像 一 副 色彩 丰富 的 图 
片 在 受到 256 色相 色 板 限制 时 ， 看 上 去 像 被 震动 处 理 了 一 样 ， 印 象 派 画家 尝试 着 将 多 种 颜色 紧 
次 的 并 置 在 一 起 ， 以 创造 出 某 种 颜色 的 效果 。 这 些 并 置 在 一 起 的 颜色 所 产生 的 光学 混合 效果 ， 
从 远 处 观看 时 ， 就 呈现 另 一 种 整体 颜色 。 


9.8.1 印象 派 画家 : 色彩 大 师 


画家 不 断 地 尝试 ， 后 来 形成 了 一 些 印象 派 画 家 的 主要 技法 ， 即 点 画 法 一 一 通过 绘制 紧邻 的 
颜色 点 来 产生 不 同 的 整体 颜色 效果 。 乔 治 “ 修 拉 首 创 了 这 项 画 技 ， 他 有 一 副 画 作 的 近 距 离 效果 
看 起 来 和 拌 动 处 理 后 的 GIF 图 片 没什么 两 样 ， 图 9-8 中 显示 了 Seurat 这 幅 作 品 的 近 距 离 效果 图 ， 
旁边 是 一 副 放 大 了 的 只 有 8 种 颜色 的 模式 动态 GIF 图 片 。 

通过 尝试 这 种 创作 方式 ， 印 象 派 画家 便 不 再 只 是 简单 地 复制 现实 ， 他 们 开始 分 析 艺 术 主 体 
和 观众 眼睛 之 间 的 区 域 。 他 们 开始 探索 如 何 形成 水 面 上 的 光线 反射 ， 波 光 染 粱 的 涟 注 ; 分 析 那 
些 可 以 赋予 物体 立体 感 阴影 的 颜色 组 合 ( 而 不 是 纯 黑 色 )。 
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图 片 复制 David Kadavy 
肖像 已 获 Masha Safina 
许可 











色 。 我 前 面 讲 过 ， 色 轮 是 由 原色 、 次 生 
色 和 三 次 色 组 成 的 。 但 在 色 轮 中 有 着 一 个 想象 中 的 “ 色 (绿色 、 蓝 色 和 紫色 ) 和 “上 暖 ” 色 ( 红 
色 、 橙 色 和 黄色 ) 划分 

Ff 以 有 冷色 暖色 的 命名 方式 ， 是 因为 暖色 给 观众 以 温暖 的 感觉 ,并 且 起 到 兴奋 的 作用 ， 
而 冷色 给 观众 以 凉 . 到 放松 的 作用 。 从 文化 上 这 是 有 道理 的 : 我 们 常 
常 将 黄色 、 橙 色 和 红色 与 太阳 或 者 火焰 联系 在 一 起 ， 而 将 蓝 色 和 水 或 者 冰 联 系 在 一 起 


1. 暖色 奔放 洋溢 ， 冷 色 保 守 内 剑 

- 般 对 于 观众 来 说 ， 暖 色相 奔放 洋溢 ， 看 起 来 更 亲近 一 些 ， 而 冷色 相 保守 内 伍 ， 看 起 来 更 
朴 远 一 些 

如 图 9-9 左 侧 部 分 ， 收 敛 的 蓝 色 块 看 起 来 就 像 是 红色 块 中 心 的 空洞 。 而 在 图 9-9 的 右 侧 部 分 
所 看 到 的 效果 却 完全 相反 ,红色 块 看 起 来 像 是 要 从 蓝 色 块 中 呼之欲出 。 暖 色相 ( 红色 ) 奔放 洋溢 ， 
而 冷色 相 ( 蓝 色 ) 保守 内 敛 ( 图 中 所 选 颜 色 的 Lab 亮度 值 相同 ) 









图 9 
红色 ( 暖色 ) 方块 呼 
之 欲 出 ， 而 蓝 色 ( 冷 
色 ) 方块 退缩 收敛 
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色相 是 从 色 轮 中 选取 的 基本 纯色 。 要 想 构造 更 复杂 的 颜色 ， 需 要 浅 或 者 暗 的 色相 。 浅 色相 
实际 就 是 稍 浅 一 些 的 原色 相 。 调 制 涂料 时 ， 只 需 在 其 中 加 入 白色 就 可 以 了 。 暗 色相 就 是 原色 相 
的 较 暗 版 本 。 在 调制 涂料 时 ， 基 本 上 只 需要 加 入 黑色 就 可 以 了 


2. 浅 色相 呼之欲出 ， 暗 色相 退缩 收敛 

就 像 暖 色相 奔放 ， 冷 色相 收敛 一 样 ， 这 也 可 能 是 你 意料 之 中 的 : 浅 色相 呼之欲出 ， 暗 色相 
退缩 收敛 如 图 9-10 所 示 。 在 同样 的 蓝 色 背 景 之 下 ， 浅 的 蓝 色 方 块 呼之欲出 ， 而 暗色 相 的 方块 
退缩 收敛 












蓝 色 方块 呼 之 欲 
出 ， 而 暗 的 蓝 色 方 块 
则 退缩 收敛 





3. 背景 的 重要 性 

但 是 , 浅 的 蓝 色 方块 总 是 呼之欲出 吗 ? 当然 不 是 , 颜色 所 处 的 背景 也 非常 重要 。 在 图 9-11 中 ， 
完全 相同 的 方块 放 在 少许 浅 的 背景 色 中 就 没 那么 引 人 瞩 目 。 而 置 于 沉 闽 的 暗 背 景 中 时 却 几乎 要 
跃 出 纸 面 





浅 的 蓝 色 方 块 在 浅 背 
景 下 没有 在 暗 背 景 下 
那样 呼之欲出 





4. 色温 与 浅 色相 

上 述 因 背景 不 同 而 造成 差异 的 现象 ,也 同样 适用 于 色 轮 上 两 个 相对 位 
面 的 例子 中 两 边 的 中 心 方块 都 没有 选用 浅 色相 或 者 暗色 相 ( 而 且 所 选 颜色 在 Lab 颜色 空间 中 有 
着 相同 的 亮度 值 )， 但 它们 在 蓝 色 背 景 下 的 视觉 效果 却 截然 相反 。 在 图 9-12 中 ， 紫 色 方 块 的 颜 
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上 和 蓝 色 位 置 相 邻 ， 几 乎 完全 与 背景 色 融 为 一 体 ， 而 橙色 作为 蓝 色 的 互 色 (在 色 轮 
上 和 蓝 色 位 置 相对 )， 却 强烈 地 从 蓝 色 背景 中 这 两 种 色相 ( 橙色 和 蓝 色 ) 之 间 的 反差 
如 此 之 大 ， 以 至 于 在 两 者 之 处 出 现 了 震动 感 需要 注意 的 是 ， 桨 色 显 是 - -种 冷色 ,但 
一 些 ， 而 这 就 造成 了 紫色 方块 的 轻微 凸显 效果 
z 置 相对 的 两 种 色相 形成 的 视觉 效果 是 如 此 强烈 ， 几 乎 超过 了 由 浅 色相 和 暗色 相 带 
来 的 视觉 效果 。 即 便 把 浅 的 蓝 色 中 心 方块 放置 在 暗 紫色 背景 之 上 时 退缩 收敛 的 交 
如 图 9-13 左 侧 所 示 。 但 相 比 之 下 , 右 图 浅 的 紫色 方块 却 像 要 从 暗 各 中 猛 冲 | 
印象 派 画 家 们 避免 使 用 黑色 ， 并 不 仅仅 是 因为 自然 界 中 几乎 不 存在 这 种 区 
相 变化 所 产生 的 效果 要 比 暗色 相 丰 富 的 多 黑色 构造 对 比 效 果 时 ， 就 
色相 变化 产生 的 效果 



































既 不 是 浅 色 相 也 
， 但 橙色 方块 在 蓝 
中 凸显 出 来 的 效果 要 比 
很 多 











图 9-14 的 左 侧 部 分 和 上 图 右 侧 部 分 的 颜色 组 合 完全 相同 -注意 
浅 紫 色 方块 推 向 观众 的 效果 。 而 深 灰 色 背 景 ( 带 有 相同 感知 亮度 的 中 性 灰 ) 自然 和 紫色 方 块 
形成 对 比 反差 ， 但 是 因 ; 紫色 方块 之 间 并 没有 色相 四 全 帮 人 肌 起 来 只 是 浮 在 背 
景 之 上 ,而 且 在 两 种 颜色 交汇 的 边缘 处 产生 了 令 人 不 快 自 

那么 ， 如 何 运用 这 些 和 Web 设计 更 加 美观 呢 
在 排版 中 建立 更 加 明确 的 信息 层次 结构 。 尽 管 在 Web 页 面 中 ,使 用 白 
谦 受 ， 但 这 通常 并 不 是 最 具 可 读 性 的 ， 也 不 是 最 美观 的 选择 






















9 相互 关系 ， 你 可 以 
的 Web 设计 约 负 











170 


与 设计 : 剖析 设计 之 美的 秘 





虽然 浅 的 紫色 方块 在 深 灰色 背 
但 还 是 在 
暗 的 蓝 色 背 景 中 显得 更 加 










“白杨 "系列 作品 中 的 一 幅 ,他 对 驾驭 色彩 的 能 力 可 见 一 斑 。 在 画面 中 景 ， 
白杨 的 阴影 面 着 暖色 的 天 室 和 远 处 的 树木 。 画 布 上 的 这 三 颗 白 杨 非常 旱 淡 ， 而 且 有 着 


很 好 的 立体 感 

图 9. 

黄 奈 “白杨 "( Poplar ) 系列 中 
的 这 副 画 ， 很 好 地 展现 了 他 加 
驭 色 采 的 能 力 
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但 这 三 棵 白杨 树 上 显著 的 阴影 并 不 是 用 的 黑色 。 仔 细 观 察 图 9-16， 你 就 会 明白 了 。 首先 ， 
树 的 边缘 使 用 的 是 暗 紫色 。 同 时 ， 树 干 中 心 部 分 使 用 的 是 温暖 的 、 基 于 橙色 色相 的 深 棕色 。 由 
于 白杨 的 主要 部 分 使 用 的 是 偏 暖色 ， 所 以 营造 出 了 一 些 立体 感 ， 使 树干 有 向 外 延伸 的 感觉 ， 而 
树干 边缘 则 退缩 收敛 。 

此 外 ,背景 中 的 天 空 和 树叶 都 是 黄色 相 一 一 紫色 的 互补 色 。 这 为 天 空 和 树干 边缘 营造 出 了 
最 大 可 能 的 色彩 反差 ， 以 及 当 我 们 观看 黑色 背景 下 物体 时 所 期 许 的 某 种 模糊 的 振动 感 。 





图 9-16 
颜色 关系 的 微妙 变化 
为 树干 营造 出 立体 
感 ， 而 且 使 树干 周围 
的 天 空 闪耀 发 光 





9.8.4 像 莫 奈 那样 用 色 


莫 奈 的 画作 是 使 用 鲜明 色彩 的 极端 例子 。 你 可 以 试 着 去 模仿 他 ， 哪 怕 只 在 高 亮 或 者 阴影 中 
加 入 少许 颜色 ， 也 会 为 设计 注入 活力 。 比 如， 可 以 考虑 在 设计 排版 或 者 创作 界面 元 素 时 运用 一 


1. 让 排版 丰富 充实 
在 图 9-17 中 ， 主 要 文字 为 纯 黑 色 ( #000 )， 而 次 要 文字 为 中 性 灰色 ( #888 )， 这 既 不 是 暖色 
相 也 不 是 冷色 相 。 从 中 可 以 看 到 很 清晰 的 层次 结构 - 


图 9-17 


The quick fox 从 纯 黑 色 到 中 性 灰色 


的 变化 形成 了 一 定 的 
© The lazy dog 颜色 对 比 ， 但 没什么 
立体 感 
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图 9-18 使 用 了 相同 的 字体 和 文字 大 小 ,但 是 这 次 基准 颜色 是 温暖 的 深 灰 色 。 主 要 文字 为 
的 03e2b 一 一 非常 深 的 橙色 ( 暖色 相 )。 次 要 文字 为 主要 文字 颜色 的 浅 化 版 本 一 一 #9E948A。 从 可 
读 性 来 讲 ,对 比 度 足够 强烈 ,但 又 不 像 黑 白 对 比 那样 刺眼 。 总 体 而 言 ,这 样 的 视觉 效果 很 好 很 温暖 。 


图 9-18 


axeuzzxs The duick fox 
ee © The lazy dog 


图 9-19 中 的 主要 文字 使 用 了 和 上 图 相同 的 深 栓 色 ， 但 这 次 ， 次 要 文字 并 没有 直接 使 用 基准 
颜色 的 浅 化 版 本 ， 而 是 使 用 了 一 种 互补 的 (冷色 相 ) 灰色 : #808094。 这 为 我 们 构造 的 层次 结构 
增添 了 额外 的 立体 感 。 不 仅仅 是 因为 次 要 文字 比 主 要 文字 小 而 且 浅 ， 而 且 次 要 文字 现在 是 冷色 
相 ， 这 使 它 更 加 退缩 收敛 。 现 在 这 两 条 信息 之 间 形 成 的 色彩 关系 ,增强 了 我 们 想 要 的 层次 结构 ， 
同时 还 营造 出 一 种 协调 务实 的 感觉 。 


mm The quick fox 


色 ， 次 要 文字 使 用 淮 
灰色 . 当 间 出 了 -和 © The lazy dog 
微妙 的 层次 感 





2. 为 图 形 注入 活力 
熟练 地 把 握 色 彩 关系 是 设计 有 趣 双 真 的 图 形 界面 ( 比如 按钮 ) 的 关键 所 在 。 图 9-20 是 在 
Adobe Photoshop 中 通过 矢量 蒙 版 设计 的 两 个 按钮 ， 使 用 了 相同 的 基准 色 ( #C66 )， 但 是 高 亮 和 


阴影 的 处 理 方式 各 有 不 同 。 
Click Here 


左 侧 按钮 的 高 亮 和 阴影 ， 是 通过 使 用 渐变 又 加 层 产 生 的 简单 “ 黑 一 白 一 黑 ” 渐 变 效果 、 线 
性 加 深 (linear bum ) 混合 模式 和 26% 不 透明 度 共同 作用 形成 的 。 在 混合 模式 中 使 用 黑色 和 白 
色 类 似 于 绘画 中 的 颜料 混合 。 按 钮 阴影 是 红色 基准 颜色 的 较 深 版 本 一 一 就 像 是 在 基准 色 中 混 人 
了 黑色 。 同 理 ， 按钮 高 亮 处 是 基准 色 的 较 浅 版 本 。 最后， 按钮 的 投影 是 由 不 透明 度 为 75% 的 黑 
色 构 成 的 。 

通常 情况 下 这 是 个 有 吸引 力 的 按钮 。 浅 色 和 深 色 搭 配 为 我 们 营造 了 高 亮 和 阴影 的 感觉 。 但 
它 不 如 右 侧 使 用 “ 绿 - 黄 - 绿 ”渐变 ( 绿色 是 冷色 相 ， 而 且 是 红色 的 互补 色 ， 而 黄色 的 色温 比 
红色 更 暖 ) 和 深蓝 投影 构成 的 按钮 那样 丰满 - 


图 9-20 


加 
熟练 地 把 握 色彩 关系 加 9 
能 在 更 复杂 的 调 色 板 Click Here 


上 设计 出 更 具 吸 引力 
的 按钮 
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之 所 以 用 这 种 方式 混合 颜色 ,运用 的 正 是 色 轮 上 的 色彩 关系 。 现 在 按钮 的 阴影 更 接近 紫 罗 
兰 色 ， 因 此 色温 比 基 准 色 要 冷 ， 进 而 使 阴影 看 起 来 退缩 收敛。 按钮 高 亮 部 分 偏向 橙色 ， 这 使 它 
看 起 来 比较 奔放 洋溢 。 为 了 让 对 比 更 加 协调 ， 按 钮 上 的 文字 使 用 了 非常 浅 的 黄色 。 按 钮 旁边 的 
色 卡 清楚 的 展示 了 这 两 个 按钮 调 色 板 的 区 别 。 

不 要 草率 地 使 用 黑色 。 如 果 能 真正 娴熟 地 运用 色彩 关系 来 构造 立体 感 ， 就 可 以 真正 为 设计 
注入 鲜 活力 。 


9.9 配色 方案 


现在 ， 了 解 了 颜色 是 怎样 互相 作用 的 ， 就 可 以 更 好 地 去 体会 如 何 为 设计 选择 颜色 。 设 计 师 
们 在 设计 中 会 根据 一 些 流行 配色 方案 来 搭配 颜色 。 有 时 ， 他 们 是 刻意 去 应 用 这 些 特定 颜色 组 合 ， 
但 在 很 多 情况 下 ,设计 中 的 颜色 组 合 只 是 直觉 的 产物 。 以 下 是 艺术 设计 系 学 生 需 要 学 习 的 一 些 
配色 方案 ， 在 一 些 非 常 优秀 的 Web 设计 中 可 以 找到 这 些 配 色 方案 的 实际 应 用 。 


9.9.1 单一 配色 方案 


单一 配色 方案 ( 见 图 9-21 ) 是 指 在 整个 设计 过 程 中 只 使 用 一 种 基准 色相 。 通 常 还 会 用 到 此 
色相 的 各 种 浅 色 相 和 暗色 相 。 单 一 配色 方案 往往 给 人 非常 安静 的 感觉 ， 但 这 也 取决 于 浅 色相 和 
暗色 相 在 设计 中 的 比重 。 


百 ] 图 9-21 
单一 配色 方案 中 包含 
着 一 种 色相 的 各 种 不 
同 浅 色相 和 暗色 相 


Intelligence Squared 的 Mountain Festival 网 站 ( www:jiq2mountainfestival.com ， 见 图 9-22 ) 使 
用 的 就 是 带 有 深蓝 色 背 景 的 单一 配色 方案 。 各 种 不 同色 相 的 蓝 色 共 同形 成 了 一 个 清爽 的 调 色 板 ， 
能 够 让 你 想起 在 户外 山坡 上 的 日 子 。 

当然 ， 完 全 使 用 单一 配色 方案 难免 会 有 点 单调 乏味 。 所 以 他 们 很 明智 地 在 网 站 顶部 的 购 票 
按钮 上 使 用 了 一 点 粉红 强调 色 。 
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图 9-22 





Intelligence Squared 
的 Mountain Festival 


首页 使 用 的 是 ， 
4 多 BECAUSE 
漳 多 要 调 色 IT'S THERE 








的 单一 蓝 色 配 色 方案 
图 片 复制 已 获 IQ2 
Festival 许可 








9.9.2 相似 配色 方案 





相似 配色 方案 ( 见 图 9-23 ) 通常 会 上 相 邻 的 三 种 色相 ( 比如 蓝 绿色 
黄色 )， 当 然 有 时 候 也 可 能 会 跳 过 中 间 色 ( 比如 蓝 色 、 绿 色 和 黄色 )。 类 似 的 配色 方 3 
来 和 谐 宁 静 


绿色 和 绿 
往 看 起 





类 似 配色 方案 使 用 在 
在 色 轮 上 彼此 相 邻 的 
颜色 
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如 果 你 正在 为 社区 度假 屋 设计 网 站 ， 那 么 宁静 和 谐 的 效果 可 能 正 是 你 想 要 的 。 由 Andy 
Clarke 设计 的 邻近 度假 屋 网 站 Caerwys View ( www.caerwysview.net， 见 图 9-24 )， 使 用 了 绿 蓝 、 
绿 黄 和 黄 橙 的 相似 配色 方案 ， 有 着 非常 宁静 的 感觉 。 这 些 颜 色 贯 穿 于 整个 网 站 中 的 照片 、 插 图 
以 及 界面 元 素 和 排版 之 中 


图 9-24 

Caerwys View 网 站 使 
用 了 相似 配色 方案 
图 片 复制 已 获 Suffand 
Nonsense Ltd 许可 




















9.9.3 互补 配色 方案 


互补 配色 方案 使 用 在 色 轮 上 位 置 相对 的 两 种 颜色 ( 见 图 9-25 )。 互 补 色 之 间 会 形成 最 大 的 色 

彩 反差 ， 所 以 这 样 的 配色 方案 往往 有 着 刺激 喧闹 的 观感 。 出 于 这 个 原因 ， 撞 色 在 运动 队 队 服 中 

常常 见 ，NFL ( 美国 微 槛 球 联盟 ) 中 的 丹佛 野马 队 、 芝 加 哥 能 队 和 迈阿密 海豚 队 都 在 队 服 上 
使 用 了 蓝 橙 互补 色 系 ， 而 明尼苏达 维 京 人 队 用 的 是 紫 黄 互补 色 系 
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图 9-25 
互补 配色 方案 是 由 在 
色 轮 上 相互 对 立 的 颜 
色 组 成 





| 


但 是 ， 应 用 一 点 小 技巧 ， 互 补 配色 方案 就 会 变 得 比 250 磅 的 线 卫 "温柔 得 多 。 由 Mike Kus 
设计 的 Carsonified 2010 年 夏令 营 会 议 网 站 ( http://summercamp.carsonified.com， 见 图 9-26 )， 使 
用 了 红 绿 互 补 配色 方案 ， 但 采用 了 低 饱 和 度 、 少 量 淡 柔 、 稍 显 温 和 的 色相 。 


图 9-26 

Carsonified 2010 年 夏 
令 营 会 议 网 站 使 用 了 
稍 显 温和 的 互补 配色 
方案 

图 片 复制 已 获 Carsonified 
许可 








人 线 卫 是 美式 橄 槛 球 中 防守 方 的 重要 成 员 ， 是 场 上 任务 最 多 ， 最 能 搏斗 的 大 块头 。 一 一 译 者 注 





互补 配色 方案 甚至 可 以 用 在 瑜伽 网 站 上 
)， 使 用 了 


-种 清新 自然 





1 Oliver Ker 设计 的 Yoga Haven 网 站 (www 
基准 色 ， 但 是 由 于 配色 中 大 量 运用 了 浅 
和 红 杉 森林 中 练习 下 犬 式 动作 一 般 








Ce pe Te mo Brg term ope rem Tomra reper 
mck 





Yoga Haven 使 用 了 
互补 配色 方案 ， 但 仍 
给 人 以 清新 自然 的 





论 
图 片 复制 已 获 YogaHaven 
许可 











9.9.4 散 互 不 方案 






券 的 两 种 pa 共同 构成 的 (参见 图 


橙色 和 红 橙色 








分 散 互补 配色 让 案 是 由 一 种 颜色 ， 以 及 其 互补 人 

9-28 )。 比如 让 互补 

分 散 互补 配色 方案 往往 没有 互补 配 
由 Mike Kus 设计 的 Amazee 

用 了 分 散 互 补 配色 

令 ( 绿 ) 灰色 背景 






;更 加 和 谐 
上 ( www.amazeelabs.com， 见 图 9-29 )， 教 科 es 
€ 9 蓝 绿 色 和 黄 绿 色 。 网 站 用 一 种 带 有 质感 凶 





种 入 
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图 9-28 
分 散 互 补 配色 方案 由 
一 种 颜色 以 及 邻近 其 
互补 色 的 两 种 颜色 共 
同 构成 


9-29 
Amazee 实验 室 网 站 
使 用 了 色彩 丰富 而 又 
不 显 吵 杂 的 分 散 互补 
配色 方案 
图 片 复制 已 获 Amazee 
Labs 许可 








9.9.5 三 色 系 配色 方案 


三 色 系 配色 方案 是 由 均匀 分 布 在 色 轮 上 的 三 种 颜色 构成 的 ( 见 图 9-30 )。 红 黄 蓝 三 原色 ， 以 
及 橙 绿 紫 这 三 种 次 生 色 ， 都 可 以 构成 三 色 系 配色 方案 。 
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启 图 9-30 
三 色 系 配色 方案 是 由 
均匀 分 布 在 色 轮 上 的 
颜色 所 构成 





由 Mike Kus 设计 的 Chirp 会 议 网 站 ( http://chirp.twitter.com， 见 图 9-31 )， 使 用 了 由 三 原色 构 
成 的 三 色 系 配色 方案 。 这 些 基准 色相 ， 连 同 天 生 饱 满 明亮 的 颜色 ， 让 网 站 看 起 来 非常 活泼 亲切 。 

这 是 因为 三 原色 看 起 来 非常 活泼 ， 而 且 它们 作为 最 基本 的 色相 经 常 和 青春 活力 联系 在 一 起 ， 
经 常 应 用 于 面向 幼儿 或 者 早期 教育 的 设计 当中 。 


图 9-31 

Chim 会 议 网 站 使 用 
了 基本 三 原色 构成 的 
三 色 系 配色 方案 

图 片 复制 已 获 Twitter 
许可 








Tay 
Pp PARTY | | 
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9.9.6 ”四 色 系 配色 方案 
四 色 系 配色 方案 是 由 两 对 互补 色 ， 共 四 种 颜色 构成 的 ( 见 图 9-32 ) 


图 9-32 
四 色 系 配色 方案 由 两 
对 互补 色 构 成 













由 品牌 代理 机 构 May 设计 的 Twiistup 会 议 网 站 ( wwwtwiistup com， 见 图 9-33 )， 使 用 了 四 色 系 
配色 方案 : 紫色 、 黄 色 、 蓝 色 和 橙色 。 从 字面 上 看 ， 这 个 四 色 系 配 色 方 案 给 3 

协调 ， 但 调 色 板 中 的 蓝 色 和 黄色 都 被 淡化 成 了 灰色 ， 而 橙色 和 紫色 仍然 
图 9-33 

Twiistup 会 议 网 站 使 
用 了 四 色 系 配色 方 Se 

浇 色 和 黄色 Register 











案 ， 虽 锣 

分 别 表现 为 冷 灰色 和 ey 
暖 灰色 TwiistupOé r startup world 

图 片 复制 已 获 Twiistup 


本 ly "se 


Where Vertare Capitatots eon cnmn ER 
Oe the Nox Eo han 
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9.9.7 任意 配色 方案 


如 果 你 不 知 从 何人 手 ， 那 么 这 种 配色 方案 就 是 很 好 的 出 发 点 。 使 用 这 种 配色 方案 的 确 会 创 
作出 优秀 的 设计 作品 ， 而 且 你 不 需要 完全 遵守 配色 方案 。 一 旦 在 设计 中 习惯 了 这 种 配色 方案 ， 
你 可 能 会 开始 赁 直觉 来 选择 颜色 。 

有 时 候 仅仅 把 所 有 的 可 选 颜色 都 用 上 ， 也 能 侥幸 做 出 不 错 的 设计 。Carbonmade 团队 在 设计 
自己 网 站 时 就 是 这 么 做 的 (www.carbonmade.com， 见 图 9-34 )。 网 站 的 设计 中 主要 包含 红色 、 
黄色 、 绿 色 、 蓝 色 和 紫色 ， 而 且 还 少量 的 橙色 和 品 红色 。 通 常情 况 下 ， 这 会 造成 视觉 障碍 ， 但 
是 柔和 的 颜色 以 及 协调 的 插画 风格 ， 让 网 站 看 起 来 漂亮 精美 。 

注意 网 站 上 的 “注册 ”( Sign Up! ) 行动 指令 按钮 要 比 它 周围 的 颜色 更 饱满 有 活力 。 章 鱼 和 
相应 的 标题 ， 与 这 个 按钮 共同 组 成 了 一 个 小 型 的 类 似 配 色 方案 。 


图 9-34 
Carbonmade 主页 中 
几乎 用 到 了 所 有 的 色 
相 ， 但 它 还 是 设法 保 
持 了 调 色 板 的 和 谐 
图 片 复制 已 获 Carbon- 
made, LLC 许可 











任意 配色 方案 的 另 一 种 模式 有 时 是 由 互补 配色 方案 外 加 这 对 互补 色 之 间 的 某 种 色相 组 成 的 。 
“西南 偏 南 ”( South by Southwest，SXSW ) 2011 年 度 会 议 网 站 的 商标 (www.sxswcom， 见 图 
9-35 ) 就 使 用 了 这 种 颜色 组 合 。 而 且 会 议 的 不 同 部 分 一 一 音乐 、 电 影 以 及 访谈 一 一 也 分 别 使 用 
了 绿 蓝 色 、 红 橙色 和 黄 绿色 。 
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图 9-35 

SXSW 2011 会 议 网 
站 使 用 了 由 一 对 互 
色 以 及 一 个 位 于 
互补 色 之 间 色 相 组 成 
的 调 色 板 

图 片 复 制 已 获 SXSW 
许可 















9.10 用 颜色 营造 气氛 








在 观察 配色 方案 设计 样 例 时 ， 你 可 能 已 经 注意 到 ， 网 站 的 整体 感觉 会 截然 不 同 ， 某 种 程度 
上 似乎 与 颜色 组 织 方式 一 点 也 不 相符 。 你 也 可 能 在 设计 中 见 到 一 些 非 正规 的 颜色 相互 作 
用 模式 。 不 同 颜色 的 排列 方式 和 深浅 会 在 很 大 程度 上 影响 网 站 的 观感 。 以 下 是 一 些 你 可 能 正在 
寻觅 的 设计 模式 





9.10.1 神秘 或 独特 


带 有 神秘 感 或 独特 感 的 整体 设计 往往 比较 厚重 ， 可 能 还 会 
色 。 以 Sam Brown 设计 的 Endorse 为 例 ( www.endorse， 见 图 9-36 )， 


鲜明 的 高 亮色 或 者 强调 
它 使 用 中 性 灰 凸 显 
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出 了 非常 深 的 背景 色 。 这 是 设计 的 主 色 ， 它 给 人 对 着 门 上 隙 低 声 说 出 密码 ， 然 后 步 和 人 
地 下 酒吧 的 神秘 感觉 。 由 于 该 网 站 的 目标 用 户 是 朋友 和 同事 ， 所 L 感 合乎 情理 





E77 





Endorse 使 用 深 色 
Endor 
色 板 以 天 


特征 色 ， 


独一无二 的 形象 
naQorsSse sm 





Brown, Endorse 许可 








色 方案 或 者 三 色 系 


活泼 动感 的 设计 ， 往 往 以 互补 色 与 高 人 
般 偏 安静 的 配色 方案 


案 最 容易 产生 活跃 感 ， 但 如 果 吉 
比如 相似 配色 方案 ,也 能 产生 活跃 感 
Gowalla 的 主页 ( www.gowalla.com 


鲜 梅 色 的 主 色 相 之 外 ， 其 人 











除了 代表 高 能 
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图 9-37 

Gowalla 通过 使 用 几 
乎 和 主 色 相 橙色 互 补 
的 饱 合 色 ， 显 示 出 了 Keep up with your friends, share the places you go, 
活泼 积 极 的 调 色 板 and discover the extraordinary in the world around you. 
图 片 复 制 已 获 Gowalla 


PT ET CZ" 


Gr we a 
































乘 和 调 色 板 可 以 使 用 色 轮 上 的 任何 颜色 ， 
是 灰色 、 米 黄色 ， 甚 至 轻 淡 柔 和 的 颜色 


产 


a 板 的 设计 往往 给 人 非常 平 
及 欠 饱和 的 浅 柔 色相 颜 





但 是 





9.10.3 ”柔和 安 骨 

要 加 大 强调 色 的 效果 ， 
forabeautifulweb.com， 见 E 
色 使 得 贯穿 整个 网 站 的 
强大 而 且 自信 ， 但 仍然 平静 


使 用 柔和 的 背景 通常 是 很 好 的 选择 
9-38 ) 的 设计 。 这 个 网 站 的 设计 主 
色 , 像 深 纳 葡萄 


比如 For a Beautiful Web ( www. 
1 浅 米 橙色 构成 ， 正 是 这 种 颜 
显 出 来 。 这 种 设计 看 起 来 精致 






























Drm rAd ceed Mop st lh 
by 


for a beautiful web 


Master-class workshops and DVDs that make learning the most 
up-to-date web design & development information creative. 











.10.4。” 自然 清 间 





自然 
度 的 柔和 
和 棕 黄 色 
食谱 博客 网 
的 调 色 板 是 基于 
使 用 绿 


然 清 新 的 感觉 







1 









网 交 











wwwsimplyrecipes.com, 见 图 9-39 ) 使 用 了 带 有 
食物 有 关联 的 观点 。 虽 然 网 站 没有 


1 和 的 色相 ， 所 以 仍然 给 人 以 自 
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在 柔和 调 色 板 的 衬托 
F, For a Beautiful 
Web 网 站 设计 中 的 深 
给 人 以 强大 醒目 









的 感觉 
图 片 复 制 已 获 Stuff 


and Nonsense 许可 


5 板 通 常 以 低 饱 和 
棕色 、 棕 橙色 
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图 9-39 

Simply Recipes blog 
网 站 使 用 了 通常 与 食 
物 有 联系 的 暖色 相 色 
板 。 阴 暗 而 且 欠 饱和 
的 色相 ， 网 站 设计 给 
人 以 “自然 ”的 感觉 
图 片 复制 已 获 Simply 
Recipes 许可 
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9.11 设计 调 色 板 和 配色 方案 的 工具 


现在 有 很 多 工具 可 以 用 来 设计 配色 方案 ， 以 及 从 已 有 设计 中 提取 配色 方案 。 以 下 是 其 中 一 
些 工 具 

口 颜色 设计 师 一 一 ColorSchemer ( www.colorschemer.com )。 本 章 样 例 下 面 的 所 有 调 色 板 截 
图 都 是 使 用 ColorSchemer 的 颜色 选择 器 ( 见 图 9-40 ) 在 网 站 中 捕获 的 。 使 用 ColorSchemer 
不 仅 可 以 创建 、 保 存 和 导出 调 色 板 ， 而 且 还 可 以 将 它们 分 享 到 在 线 社区 中 。 你 可 以 按 和 人 
气 浏览 调 色 板 ， 并 且 能 使 用 星 级 评级 系统 为 它们 投票 

口 配色 设计 师 一 一 Color Scheme Designer ( http://colorschemedesigner.com)。 这 款 基于 Web 
的 应 用 程序 也 能 创建 和 导出 调 色 板 ( 见 图 9-41 )。 它 包含 了 ColorSchemer 大 部 分 的 功能 ， 
但 没有 社区 方面 的 支持 
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ColorSchemer 是 一 款 允 
许 你 创建 、 保 存 和 分 
享 调 色 板 的 Macintosh 
应 用 软件 
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Color Scheme Designer 
是 一 款 基于 Web 的 免 
费 应 用 程序 ， 允 许 你 
创建 和 预览 色彩 主题 
图 上 








Stanicigk 许可 








口 色彩 搭配 软件 一 Adobe Kuler ( http://kuleradobe.com )。 这 
不 仅 可 以 创建 和 保存 调 色 板 ， 而 且 还 
按 人 气 浏览 调 色 板 ， 并且 能 使 用 5 





于 Web 的 免费 应 用 程序 
们 ( 见 图 9-42 )。 你 可 以 





以 在 在 线 社 区 中 分 让 
们 投票 
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章 附录 B 排版 规范 





附录 
字体 的 选择 和 搭配 





现在 ， 几 乎 有 无 数 种 不 同 品 质 的 字体 可 供 选择 。 那 些 
铅 铸造 出 的 字符 ， 现 在 只 需 点 击 几 下 就 可 无 限 复制 。 随 着 出 版 技术 的 长 足 发 展 ， 设 计 师 们 可 用 
的 字体 数量 成 爆炸 式 增长 。 你 会 发 现 ， 不 但 有 很 多 古老 的 经 典 字 体 再 度 焕发 青春 ， 比 如 Adobe 
Garamond 字体 ， 而 且 还 出 现 了 成 千 上 万 的 低 品质 字体 

这 与 早期 印刷 者 有 限 范围 形成 了 鲜明 对 比 。 早 期 的 印刷 活字 ( 见 图 A-1 ) 必须 逐个 
字符 的 仔细 切割 ， 然 后 再 作出 字 范 ( 详情 可 参阅 第 
几 种 。 如 果 他 们 想 要 不 同 的 字号 ， 还 得 重复 上 而 






刻 在 大 理 石 上 ， 或 用 


















早期 印刷 中 的 铅字 制 
作 起 来 费时 又 费力 ， 
由 了 印刷 者 可 选 
范围 

Tonyst 摄 (htpywww 





flickreom/people/tunnuh/ ) 





附录 A 字体 的 选择 和 搭配 


早期 的 印刷 者 都 是 专业 技工 ， 他 们 为 美化 排版 工艺 事业 奉献 终身 。 他 们 的 技艺 专业 精湛 ， 
这 在 他 们 高 品质 的 作品 中 深 有 体现 。 然 而 ， 他 们 却 受 到 了 可 选 字体 数量 的 限制 。 

相 比 之 下 ,当今 的 设计 师 ( 实际 上 是 所 有 使 用 计算 机 的 人 ) 很 少 接受 过 正式 的 排版 工艺 训练 ， 
然而 他 们 可 支配 的 字体 却 要 多 得 多 。 所 以 毫 无 疑问 .字体 选择 是 新 手 设计 师 所 要 面 对 的 最 迷茫 
的 话题 之 一 。 各 种 建议 忠告 混乱 不 清 又 前 后 矛盾 。 和 字体 的 实质 意义 没有 太 大 关系 的 字体 分 类 ， 
连同 模糊 的 定义 规则 ， 被 四 处 滥用 。 

然而 ,也 有 好 的 一 面 和 专业 印刷 者 一 样 ， 你 真正 需要 的 只 有 几 种 主要 字体 。 你 可 以 将 通晓 
排版 技术 和 研究 不 同 字体 间 的 所 有 特征 作为 毕生 事业 ， 但 也 许 你 只 是 想 快速 地 开展 项 目 并 让 它 尽 
可 能 得 漂亮 好 看 ,那么 只 需要 了 解 一 小 部 分 字体 ,你 就 能 快速 地 做 出 正确 选择 而 且 推 进项 目的 进程 。 

能 了 解 字 体 间 的 基本 差异 ， 尤 其 是 再 和 通过 微妙 的 排版 变化 ( 比如 字号 、 粗 细 以 及 留 白 ) 
来 构造 信息 层次 结构 的 一 些 基本 技能 结合 起 来 ， 会 助 你 在 设计 旅程 中 一 路 畅通 。( 详情 请 参阅 第 
5 章 、 第 6 章 和 第 7 章 。) 

在 本 附录 中 ,通过 盖 明 字体 形式 的 基本 理念 和 构造 结构 ， 我 会 揭示 字体 之 所 以 不 尽 相同 的 
根本 原因 。 想 要 更 深入 地 研究 字体 选择 ， 我 会 教 你 如 何 选择 出 让 人 喷 喷 称 赞 的 字体 搭配 。 最 后 ， 
我 会 向 你 展示 一 些 设计 中 常用 的 高 品质 字体 。 


A.1 字体 分 类 


华 果 CEO 史 蒂 夫 “' 乔布斯 在 斯 坦 福 大 学 2005 级 毕业 典礼 演讲 中 ， 分 享 了 他 大 学 时 代 无 意 
中 进入 书法 班 的 学 习 经 历 ， 他 如 是 形容 排版 :“ 美 妙 …… 科 学 永远 不 能 捕捉 到 的 美 。” 无 法 定义 ， 
这 正 是 导致 很 多 字体 及 其 特征 分 类 不 精确 的 部 分 原因 。 

当今 流行 的 字体 分 类 系统 在 划分 字体 类 型 方面 做 得 很 到 位 ， 主 要 是 依据 字体 的 装饰 性 特征 
来 划分 的 。 但 这 样 的 分 类 方式 ， 对 设计 人 员 理 解 字体 特征 ， 或 者 了 解 如何 恰 当地 搭配 字体 没 什 
么 帮助 。 这 些 分 类 是 值得 学 习 的 ， 但 字体 的 整体 结构 对 于 理解 字体 所 传达 的 氛围 或 感觉 更 为 关 
键 (在 稍 后 的 “观察 字母 结构 :骨架 的 样式 ”小 节 中 会 涉及 这 个 话题 )。 


字体 和 字 型 


字体 (typeface ) 和 字 型 ( font ) ?这 两 个 术语 经 常会 被 混用 ,但 还 是 很 有 必要 了 解 两 省 的 差 骨 。 
Typeface ( 或 称 为 type、face ) 是 指 字体 的 外 形 ， 而 font 是 包含 typeface 的 文本 。 很 多 语言 纯正 
将 者 坚持 准确 使 用 这 两 个 术语 ， 但 是 出 于 通俗 易 尽 的 考虑 、 在 任何 非 正式 的 场合 我 都 用 font 未 
代 指 字体 的 含义 。 固 然 ， 在 技术 屋面， 设计 决 策 都 是 基于 typeface 的 ， 但 是 你 需要 选择 一 个 font 
来 显示 typeface。 而 且 ， 比 起 这 两 个 术语 之 间 的 区 别 ， 你 可 能 有 一 些 更 重要 的 事情 需要 考虑 。 


@ 按照 标准 译 法 typeface 和 font 应 该 分 别 对 应 “字体 ”和 “ 字 型 "， 这 是 两 个 来 自传 统 印刷 行业 的 术语 。 但 是 随 着 
印刷 技术 的 发 展 ， 而 且 font 在 计算 机 术语 中 十 分 常见 ， 以 致 这 两 个 术语 之 间 的 界限 越 来 越 模糊 ， 在 本 书 中 这 两 个 
术语 都 被 译 为 “字体 "， 这 也 遵循 了 作者 的 本 意 。 一 一 译 者 注 
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A.1.1 衬 线 字体 


衬 线 字 体 在 笔划 的 结尾 处 都 有 小 小 的 “前 脚 ”一 一 称 为 衬 线 。 通 常 这 些 衬 线 被 认为 是 钢笔 
或 者 画笔 书写 时 留 下 的 痕迹 ,实际 上 ,使 用 凿 子 的 局 限 性 也 是 形成 衬 线 的 一 种 原因 ( 参见 第 3 章 )。 


1. 老式 字体 

老式 字体 ( 见 图 A-2 ) 一 般 起 源 于 文艺 复兴 早期 的 印刷 作品 中 (参见 第 3 章 )， 当 时 字母 样 
式 已 开始 逐渐 脱离 手 抄 字母 的 影响 ， 而 更 多 地 受 字 范 制作 工序 的 影响 ( 参见 第 3 章 )。 老 式 的 字 
体 保留 着 一 些 用 笔 书写 的 特点 ,但 笔画 都 经 过 了 调整 ， 字 体 的 轴线 略微 倾斜 仿佛 是 由 倾斜 的 
笔 所 书写 的 ， 衬 线 也 做 得 比 直接 用 笔 书写 形成 的 更 为 圆滑 。 


图 A-2 
老式 字体 起 源 于 早期 印刷 。 它 们 不 仅 保 
留 着 一 些 从 手 抄 字体 继承 来 的 书写 工具 
影响 因素 ( 如 倾斜 的 轴线 ， 以 及 柔和 地 ee 
模拟 衬 线 )， 而 且 也 受到 字 范 制作 工序 
的 影响 Adobe Garamond 
2. 过 渡 性 字体 


过 渡 性 字体 ( 见 图 A-3 ) 的 发 展 始 于 18 世纪 中 叶 ，Romain du Roi 字体 是 第 一 款 过 渡 性 字 
体 ( 参见 第 4 章 )。 过 渡 性 字体 不 再 是 受 字 范 制作 和 手写 字体 双重 影响 的 产物 ， 而 是 更 趋 于 几 
何 合理 化 样式 。 其 特点 是 使 用 带 有 强烈 粗细 变化 的 大 幅度 调整 笔画 、 垂 直 轴 线 ， 以 及 锋 锐 的 
模拟 衬 线 。 


图 A-3 


ee@ 
相 比 老式 字体 ， 过 渡 性 字体 受 手写 字体 
的 影响 已 经 没 那么 明显 。 它 们 更 趋 于 几 | ransitional 
何 合理 化 ， 所 以 其 特点 是 大 幅度 的 调整 。 korie 


笔画 、 垂 直 轴线 ， 以 及 锐利 的 模拟 衬 线 


3. 现代 字体 

现代 字体 ( 见 图 A-4 ) 已 经 在 几何 结构 上 达到 了 高 度 理性 化 ， 而 且 笔 画 的 粗细 反差 极 大 ， 
超越 了 铅字 的 极限 。 在 现代 字体 中 ， 粗 细 笔 画 过 渡 之 处 是 用 正 圆 来 塑造 的 。Giambattista Bodoni 
和 Firmin Didot ( 分 别 有 同 名 的 字体 ) 是 现代 字体 的 主要 创新 者 。 这 类 字体 都 有 着 非常 极端 的 调 
整 笔画 、 垂 直 的 轴线 、 极 细 的 衬 线 ， 以 及 几何 结构 理性 化 的 字 谷 (字母 内 的 负 空间 )。 


附录 A 字体 的 选择 和 搭配 


图 A-4 

现代 字体 都 高 度 的 几 

何 合理 化 。 其 特征 是 

ce | | | 极端 的 调整 笔画 ， 垂 

直 的 轴线 ， 极 细 的 衬 

Bodoni 线 和 几何 结构 理性 化 
的 字 谷 


4. slab-serif 字体 

起 源 于 19 世纪 初 的 slab-serif 字 体 ( 见 图 A-5 )， 有 时 也 被 称 为 古 埃及 字体 ( 尽管 两 者 之 间 
没有 任何 关系 )。 这 种 字体 的 笔画 调整 微乎其微 ， 而 且 四 四 方 方 的 衬 线 几乎 和 字母 笔画 一 样 粗 
由 于 在 slab-serif 字体 中 没有 太 多 的 笔画 调整 ， 所 以 也 没有 太 多 的 轴线 ， 但 是 所 有 可 见 的 轴线 都 


是 垂直 的 
a 图 A-5 
slab-serif 字体 的 笔画 
;调整 微乎其微 ， 四 四 


Museo Slab 一 方 方 的 衬 线 和 笔画 其 
余部 分 一 样 粗 








A.1.2 无 衬 线 字体 


无 衬 线 字体 ( 见 图 A-6 ) 字 如 其 名 一 一 没有 衬 线 。 不 同 的 无 衬 线 字 体 在 特征 方面 差异 很 大 ， 
这 就 是 为 什么 理解 字母 结构 差异 是 如 此 重要 了 ( 参见 本 章 稍 后 的 A.2 节 ) 





图 A-6 


7 字体 都 没有 衬 
， 但 像 笔画 调整 和 


这 样 的 特征 
Helvetica 显 





A.1.3 ”展示 字体 


剩余 的 其 他 字体 差不多 都 可 以 被 归 人 展示 5 
图 A-7 )。 这 些 字体 更 多 的 是 注重 装饰 效果 ， 而 不 是 阅读 效果 。 你 会 发 现 ne 
瑞士 干酪 、 勒 索 信 ， 称 是 从 林 动 物 。 许 多 展示 字体 可 能 也 符合 以 上 提 到 的 某 个 分 类 ,但 它 
们 都 带 有 一 些 刻意 而 为 的 特征 ( 比如 质地 ) 或 者 其 他 缺陷 






者 称 为 装饰 字 者 花 式 字体 ) ( 见 
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A-7 


展示 字体 在 样式 上 各 分 
不 相同 ， 而 且 常 常 模 
仿 特 殊 的 质地 或 者 其 
他 特征 ， 比 如 黑板 上 

的 粉笔 字 Chalkduster 


A.2 ”观察 字母 结构 :骨架 的 样式 


即便 是 上 一 小 节 中 提 到 的 某 一 分 类 下 的 两 种 字体 ， 如 打字 母 结构 不 同 ， 它 们 的 整体 感觉 也 
会 有 着 天 壤 之 别 。 例 如 Gill Sans 、Helvetica 和 Futura 都 是 无 衬 线 字体 ， 但 是 它们 所 传递 出 的 感 
觉 和 意象 却 各 有 不 同 : Gill Sans 看 起 来 友好 亲切 ，Helvetica 看 起 来 呆板 严肃 ;而 Futura 看 起 来 
虽然 简洁 ， 但 却 非常 精妙 

这 些 字体 感 观 不 同 的 根源 在 于 字母 结构 的 不 同 ， 而 这 恰好 就 是 其 设计 哲学 的 体现 。 字 母 结 
构 有 着 复杂 的 但 有 一 些 结构 在 所 有 的 字体 当中 都 存在 。 理 解 这 些 基本 的 结构 种 类 ， 有 助 
于 为 字体 选择 做 出 合理 的 决策 


A.2.1 人 文 主义 字体 


人 文 主义 字体 ( 见 图 A-8 ) 的 灵感 来 源 六 动 站 把 
期 (参见 第 3 章 ) 的 第 一 款 印刷 
式 又 是 为 了 提升 撰写 效率 ( 抄写 
受到 抄写 员 和 笔尖 特征 的 影响 ， 而 无 关 数 学 或 者 逻辑 
虽然 摇篮 期 之 后 又 出 现 了 很 多 其 他 风格 的 字体 ， 但 人 文 主义 风格 仍然 影响 着 现代 的 无 衬 线 
字体 ， 比 如 Gill Sans 、Lucida Grande 、Verdana 、Tahoma 和 Trebuchet MS。 讽 刺 的 是 ， 正 是 这 些 
受 古老 人 文 主义 风格 影响 ， 带 有 更 开放 字 谷 的 无 衬 线 字母 ， 却 在 现代 电脑 屏幕 上 的 有 着 出 众 的 
可 读 性 
图 A-8 . 
At Humanist / Humanist 
的 影响 








复 > A 主义 运动 。 诞 生 于 印刷 揪 复 
计 的 。 而 书写 字体 的 样 
了 字母 ) 而 设 的 ， 所 以 字母 的 样式 会 














Gil Sans Palatino 


A.2.2 几何 字体 

相 较 于 手写 字体 的 人 文 主义 倾向 的 影响 ， 几 何 字体 ( 见 图 A-9 ) 更 多 受到 了 正方 形 、 圆 形 
和 三 角形 的 直接 影响 。 几 何 字 体 中 的 o 往往 接近 于 正 圆 形 。Futura 字体 是 一 种 极致 的 几何 无 衬 
线 字体 ， 而 Century Gothic 字体 也 很 常见 ， 但 由 于 厚重 的 横 坐 标 长 度 ( 宽 ) 以 及 难看 狭窄 的 字母 
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s 和 字母 r, 它 并 不 是 很 成 功 。Romain du Roi 字体 ( 参见 第 3 章 ) 虽然 受到 了 较 深 的 几何 学 影响 ， 
但 也 充分 受到 了 书写 样式 的 影响 ， 进 而 表现 出 现实 主义 的 结构 。Bodoni 也 充分 接受 了 几何 学 的 
影响 ， 是 一 种 极致 的 几何 衬 线 字体 。 


Geometric / Geometric Mirman nn 


A.2.3 ”现实 主义 字体 


现实 主义 字体 的 结构 很 好 地 平衡 了 书写 样式 和 几何 结构 的 影响 ， 有 时 也 被 称 为 过 渡 性 字体 。 
现实 主义 字体 的 样式 既 不 是 来 自 书写 手法 ， 也 不 是 来 自 数学 精度 ， 而 是 介 于 两 者 之 间 ( 见 图 
A-10 )。Helvetica 字体 是 一 种 极致 的 现实 主义 字体 ， 它 看 起 来 如 此 普通 以 至 于 有 时 被 认为 是 “不 
显眼 ”或 者 “没有 特点 ” 


, . 图 A-10 
Realist / Realist :os 
Arial Georga 重 影响 下 的 混合 体 


A.3 字体 配对 


仅仅 是 一 种 字体 就 可 以 有 无 数 种 用 法 ( 参见 第 7 章 )， 但 有 些 时 候 同 时 使 用 多 种 字体 可 以 提 
升 沟通 效率 ， 并 且 使 设计 更 具 活 力 。 寻 找 搭配 效果 良好 的 字体 组 合 是 一 项 富有 挑战 性 的 工作 。 
在 字体 配对 方面 存在 一 些 不 错 的 经 验 法 则 ， 但 也 有 一 些 例外 的 情况 。 了 解 不 同 字体 组 合 搭配 的 
原因 ， 才 能 在 设计 中 添加 字体 时 做 出 明智 选择 。 


A.3.1 法 则 


虽然 关于 排版 ， 有 很 多 混乱 不 清 且 前 后 矛盾 的 “法 则 ”， 但 其 中 被 公认 的 一 条 就 是 不 要 使 用 
超过 两 种 以 上 的 字体 : 一 种 衬 线 字 体 ， 一 种 无 衬 线 字体 。 这 条 通用 建议 还 是 相当 合理 的 。 虽 然 
使 用 一 种 字体 体系 ， 就 可 以 很 容易 地 构造 出 漂亮 清晰 的 层次 结构 ( 参见 第 7 章 )， 但 是 加 入 另 一 
种 字体 体系 可 以 提升 设计 的 活力 ， 并 实现 只 用 一 种 字体 难以 企及 的 复杂 度 。 然 而 ， 使 用 两 种 不 
同 的 衬 线 字体 或 者 两 种 不 同 的 无 衬 线 字体 并 没有 太 大 的 作用 。 衬 线 字体 与 无 衬 线 字体 的 混合 会 
让 读者 感到 迷惑 ， 另外， 这 也 无 法 提供 足够 的 视觉 变化 来 证 明 复 杂 性 的 提升 

在 打印 软件 中 ， 衬 线 字体 通常 要 比 无 衬 线 字体 更 具 可 读 性 。 所 以 ， 如 果 设 计 中 使 用 了 两 种 
字体 ， 那 么 无 衬 线 字体 通常 用 于 文章 的 标题 和 刊 头 ， 而 衬 线 字体 则 常用 于 正文 主体 。 

但 是 ， 有 着 较 低 分 辩 率 的 Web 环境 使 用 习惯 却 不 同 ( 具体 原因 参见 第 3 章 )。 这 种 情况 下 
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通 
和 标 


为 无 衬 线 字体 在 屏幕 上 的 可 读 性 更 好 .所 以 当选 择 第 2 种 字体 时 ， 外 观 更 为 复杂 的 篇 名 
往往 会 使 用 衬 线 字体 

i 见 配置 的 反 向 配置 ( 即 篇 名 和 标题 选择 无 字体 ， 正 文 主体 选择 衬 线 字体 ) 
也 是 可 行 的 ， 前 提 条 件 是 衬 线 字体 是 针对 Web 设计 的 ( 比如 Georgia )， 而 且 要 显示 得 足够 大 





然而 ， 并 非 永远 不 能 在 设计 中 使 用 两 种 
种 无 衬 线 字体 ， 那 么 你 可 能 又 需 
\ 一 些 ( 如 正文 或 者 内 容 详情 ) 

在 这 种 情况 下 ， 为 较 大 的 标题 文字 选择 一 种 针对 打印 设计 的 ， 更 注重 细节 的 字体 也 没有 任 
何 问题 。 这 是 因为 很 多 针对 Web 中 正文 尺寸 可 读 性 而 设计 的 字体 ， 通 常 在 大 尺寸 时 都 表现 平 
良 。 这 些 字 体 往 往 被 设计 成 大 字 谷 ， 或 者 在 其 他 方面 做 了 简化 以 保持 字体 在 较 小 尺寸 下 的 可 读 
性 在 大 尺寸 下 显示 时 ， 这 些 特性 让 字体 看 起 来 就 没 那么 诡 媚 讨好 了 

在 图 A-11 显示 的 John Gruber 的 网 站 ( www.daringfireball.net ) 特征 中 ， 你 可 以 看 到 两 种 
用 效果 。 较 大 字 分 例如 博文 标题 和 菜单 项 ) 使 用 了 更 具 细节 感 的 Gin 





线 字体 或 者 无 衬 线 字体 。 例 如 ， 如 果 你 在 设计 中 
4 部 分 文字 显得 较 大 些 ( 比如 小 标题 )， 而 其 他 























John Gruber 的 网 站 
位 正文 使 用 了 易 读 的 
Verdana， 为 标题 使 3 DARING FIREBALL 
用 了 更 为 引 人 关 注 的 
Gill Sans 

2002 一 2011 John 
Gruber 版 权 所 有 





这 种 搭配 并 不 是 巧合 。Verdana 和 Gill Sans 都 有 着 相似 的 人 文 主义 字母 结构 。 但 大 字 谷 和 
角 节 使 Verdana 在 小 尺寸 下 易于 阅读 ， 而 在 大 尺寸 下 笨拙 乏味 。Gill Sans 和 Verdana 足够 
于 不 会 产生 干扰 效果 ， 但 前 者 有 着 更 多 的 细节 特征 ， 使 它 成 为 尺寸 较 大 的 篇 名 和 标题 
的 最 佳 字体 选择 





附录 A 字体 的 选择 和 搭配 


需要 注意 的 是 ，Daring Fireball 的 Logo 用 的 既 不 是 Gill Sans 也 不 是 Verdana， 而 是 一 种 视 
觉 感 厚重 的 简洁 现实 主义 字体 。Logo 字体 和 其 他 部 分 字体 之 间 的 这 种 区 别 是 常用 手法 ， 用 来 突 
出 Logo 自身 的 视觉 重要 性 。 


A.3.3 为 什么 有 些 字体 搭配 效果 良好 


要 和 漠 明白 两 种 字体 搭配 效果 良好 的 原因 ， 首 先 就 需要 了 解 字体 的 各 种 属性 。 前 面 讲 到 的 字 
母 结构 ， 以 及 包括 质感 和 字符 宽度 在 内 的 其 他 重要 特性 ， 都 会 对 字体 搭配 效果 产生 巨大 的 影响 。 


1. 质感 

质感 (有 时 也 称 为 颜色 ) 是 字体 彼此 不 同 的 一 方面 因素 。 而 且 它 会 还 影响 两 种 字体 的 兼容 
性 。 质 感 是 指 由 给 定 字体 组 成 的 正文 文字 的 整体 感 观 。 排 版 设计 师 会 力求 在 整个 文本 段落 中 保 
持 大 体 上 均匀 的 质感 。 如 果 你 昧 着 眼 观 察 某 个 文本 段落 ,应 该 不 能 有 字符 过 于 显眼 或 者 过 于 轻 淡 。 
如 果 文 本 段落 的 质感 均匀 ， 那 么 这 些 字 体 阅读 起 来 就 更 合适 一 些 。 


和 谐 与 对 比 


如 果 你 研究 过 成 功 的 恋爱 关系 和 婚 旭 ， 那 么 可 能 会 注意 到 有 些 情侣 或 者 天 妇 有 惊人 的 相似 
之 处 ; 他 们 同样 外 向 活 没 ， 他 们 ' 心 有 灵 屏 , 他 们 甚至 看 起 来 都 很 像 。 有 些 恋爱 婚姻 关系 也 很 成 功 ， 
但 情况 却 正好 与 此 相反 : 一 人 可 能 性 格外 向 、 富 有 创意 .而 另 一 个 人 却 安 静 且 普 于 分 析 。 似 乎 
处 于 这 种 美 系 下 的 伴侣 ， 由 于 彼此 性 格 的 对 立 、 而 体验 到 了 双方 原本 不 会 能 辜 到 的 生活 。 
字体 配对 与 恋爱 婚姻 关系 非常 相像 。 在 和 谐 的 字体 配对 中 ， 字 体 之 间 有 车 很 多 相同 的 属性 ， 

看 起 来 漂亮 、 优 雅 、 干 净 ; 而 彼此 形成 羡 明 对 比 的 字体 ， 通 过 营造 出 一 种 醒目 显著 的 效果 ， 同 
样 也 可 以 很 好 地 配对 。 选 择 和 谐 还 是 对 比 ， 完 全 取决 于 你 起 表达 的 感觉 ， 但 应 该 避免 采用 折 中 
的 方式 。 在 下 图 中 你 可 以 看 到 第 一 对 字体 表现 和 谐 ， 第 三 对 字体 对 比 强烈 ， 而 第 二 对 字体 希 起 
来 却 不 怎么 合适 

Were in harmony “We're neither similar We'reso different 为 字体 选择 配对 时 ， 

With each other Nor different enough We go together 

Adobe Garamond & Gil Sans Baskerile & Gl Sns Bodoni Bold Condensed & ， 


Ga Sars Lhe 对 比 的 效果 


但 是 在 正文 中 使 用 两 种 均 有 整体 均匀 质感 的 高 品质 字体 ， 却 并 不 意味 着 它们 一 定 能 和 谐 配 
对 。 因 为 质感 在 深 暗 、 浅 淡 对 比 以 及 粗糙 、 光 滑 对 比 下 区 别 最 为 明显 。 


@ 深 暗 与 浅 淡 

一 般 来 说 ， 文 本 段落 究竟 是 浅 淡 还 是 深 暗 ， 不 仅 受 字体 整体 视觉 重量 感 的 影响 ， 而 且 还 受 
字 隙 调和 (letterfit ) 或 者 ( 为 了 追求 均匀 质感 ) 字母 间 相 互 关联 样式 的 影响 ( 关于 字 隙 调和 请 
参见 3.1 节 )。 
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在 图 A-12 中 ，Arial Black 字体 的 质感 要 比 Arial 字体 暗 得 多 ， 因 为 Arial Black 字体 的 笔画 
更 粗 。 


本 NW ee, orhape won hond vtart, Moment eees men ares om ne se pertaos that head sur, 
图 A-12 2 Boo veo proms 
g FT ee ed tee ome 
Anal But: 字体 形成 人 CE er oldSemieycvape ee 
和 ee or yor, Fert Ty Men ou ono re mec nl 
的 质感 要 比 Arial 字 wom ow engine asspeclos men ee ao od0 years 
, TI ED 
体 暗 得 多 , 而 Lucida Nm 人 ee Me oo em me te ces 
Grande 字体 ,由 于 其 。 人 ee 人 tr 
宽松 的 字 阶 ， 其 形成 Arial Black Arna Lucida Grande 
的 质感 却 稍 比 Arial 
字体 浅 淡 


然而 ， 即 使 Arial 字体 和 Lucida Grande 字体 有 着 类 似 的 字体 粗细 ， 但 由 于 Lucida Grande 字 
体 的 字 隙 更 为 宽松 ， 所 以 它 的 整体 质感 会 稍 显 浅 淡 。Arial 字体 的 字 际 较为 紧密 ， 主 要 是 因为 它 
有 着 现实 主义 的 字母 结构 。 由 于 缺少 类 似 人 文 主义 的 Lucida Grande 那样 的 精细 曲线 ，Arial 字 
体 以 紧密 的 字 隙 构成 了 均匀 的 质感 。 

@ 圆滑 与 粗糙 

如 图 A-13 所 示 , Times New Roman 字体 的 字 隙 要 比 Lucida Grande 紧密 得 多 ， 而 且 它 的 笔 
画 宽度 反差 更 加 明显 。 过 渡 性 字体 的 特点 就 是 ,字母 笔画 有 着 从 比较 粗 到 非常 细 的 转变 ， 进 而 
形成 非常 锐利 的 衬 线 。 这 种 差别 使 Times New Roman 字体 有 着 和 Lucida Grande 字体 类 似 的 光滑 
质感 ， 就 像 一 面 浅 色 的 黑板 。 


图 A-13 





本 

虽然 Times New Roman EN 

i 人 
1 让 SD Te feo Ty 

感 非常 光 请 一 一 和 EEC 

Lucida Grande 字体 直 

常 关 似 . 而 人 Times New Roman Lucida Grande Arial Georga 

和 Georgia 字体 得 笔画 

调整 较 少 ， 产 生 的 质 

感 较为 粗糙 


相反 ，Arial 字体 紧密 的 字 隙 形成 了 较为 粗 烽 的 质感 。 因 为 它 的 字 谷 要 比 字母 间 的 空隙 更 为 
显眼 。Arial 字体 有 着 和 Georgia 字体 类 似 的 粗糙 质感 ， 就 像 一 块 火山 浮石 。Georgia 字体 也 有 着 
紧密 的 字 隙 ， 但 笔画 反差 不 如 Times New Roman 字体 那么 明显 。 




















附录 A 字体 的 选择 和 搭配 
在 前 面 的 例子 中 你 可 能 已 经 注意 到 ， 另外 ， 一 些 例 
子 的 行 间距 看 起 来 要 比 其 他 的 
但 实际 1 中 开 以 看 起 来 


如 下 图 所 示 ， 一 
更 大 是 因为 各 个 字体 的 x 高 度 (， 同 体 的 实际 
取决 于 最 高 的 上 升 笔画 《比如 小 


之 间 的 长 度 
大 写字 查 利 划 字体 的 不 同属 性 ， 比 


他 Clap Yelp Help 如 x 的 高 度 ， 可 以 改 


下 沉 ; 变 字体 的 视觉 尺寸 


值 在 很 大 程度 上 
母 p 的 尾部 ) 


Note Carrond To ew Rrrar Wome 





由 于 磅 值 是 铝 字 印 刷 的 遗留 概念 ， 它 实际 上 指 的 是 铬 字 块 的 袁 
额外 空间 也 被 计 入 了 字体 的 态 值 当中 意味 着 ，Verdana 字 4 
要 上 比 Times New Roman 字体 稍 长 一 些 的 原因 ， 两 种 字体 的 样 例 志 

图 A-13 所 示 的 文本 下 有 着 相同 的 司 的 重 直 空 












所 以 ， 有 时 候 一 些 
的 整体 高 度 


















司 来 自 于 印刷 者 手工 排版 的 年 代 : 印刷 者 们 在 
另外 ,术语 “行距 ”还 对 应 于 CSS 中 1 





过 调节 字体 间 的 行距 ,你 可 以 改变 文本 段落 深 瞳 或 者 浅 演 的 整体 质感 ,一 个 较 好 的 人 
通常 将 行距 设置 为 字体 尺寸 的 120% 到 140% 
像 项 目 列表 中 那 种 精 小 的 文字 部 i 








为 1.2em 到 1.4em ), 正 文 的 可 读 








2. 字符 宽度 

字符 宽度 ,顾名思义 就 是 字体 中 实际 的 字母 宽度 。 当 两 种 字体 的 字符 宽度 不 同时 ,会 在 
他 们 的 整体 字母 结构 之 间 造 成 视觉 冲突 ( 即使 基本 结构 非常 相似 )。 在 图 A-14 中 你 可 以 看 到 ， 
Verdana 字体 和 Times New Roman 字体 的 字符 宽度 极为 不 同 ， 这 就 是 它们 无 法 组 成 强大 配对 的 
因素 之 一 。 


1 1 图 A-14 

Nn Times New Roman Verdana 字体 和 Times 

iA! And verdana differ in New Roman 字 体 不 
character width, causing 同 的 字符 宽度 注定 它 
lib 们 的 配对 效果 较 差 。 

11 而 Adobe Garamond 

nN Adobe Garamond 字体 和 Gill Sans 字 

1 1 And Gill Sans have a more similar 体 却 有 着 更 为 接近 的 


马 


character width. 字符 宽度 


199 


200 黑客 与 设计 : 剖析 设计 之 美的 秘密 


小 写字 母 n 的 奥秘 


如 果 无 法 确定 两 种 字体 的 字母 结构 兼容 性 ， 那 么 你 可 以 从 小 写字 母 n 中 得 到 很 多 有 用 信息 。 
如 下 图 所 示 ， 小 写字 母 n 的 样式 反复 出 现在 字母 b、h、m、p、q (有 时 )、r 和 中。 所 以 从 小 
写字 母 中 你 便 可 以 看 出 字体 中 其 他 字母 结构 的 端倪 。 


在 大 多 数字 体 中 ， 比 如 Helvetica ¢ 
字体 ， 小 写字 母 9 的 样式 会 反复 Nn mm r U 
体现 在 字母 表 的 很 多 字母 之 中 


仔细 观察 下 图 ， 你 会 看 到 Gill Sans 字体 、Futura 字体 和 Helvetica 字体 中 的 小 写字 母 n 各 不 
相同 。 例 子 中 的 字母 都 已 经 被 调整 为 相同 的 尺寸 ( 因为 每 种 字体 有 着 不 同 的 x 高 度 )， 


从 Gill Sans 字体 、Futura 字体 和 


字 启 
Helvetica 字体 的 小 写字 母 n 中 可 。 干线 一 
以 看 到 各 种 字体 字母 结构 的 不 
回 显而易见 
Futura Helvetica 


Gil Sans i 
(人 文 主义 字体 ) (几何 结构 字体 ) (现实 主义 字体 ) 


注意 看 Gill Sans 字体 小 写字 母 n 的 字 户 像 喷 出 的 水 柱 一 样 从 干线 中 跃 出 ， 并 如 同 受 地 心 台 
力作 用 般 逐 渐 地 向 下 穹 曲 ,由 于 它 是 人 文 主义 字体 ,所 以 它 的 样式 和 人 体 及 自然 的 联系 更 加 紧密 。 

相 比 之 下 ，Futura 字体 的 样式 是 几何 理性 化 的 。 其 小 写字 母 n 的 字 育 几乎 是 对 称 的 ， 就 像 
大 门 的 拱 顶 

而 Helvetica 字体 的 小 写字 母 n 介 于 以 上 两 个 极端 之 间 , 那 刻意 弯曲 的 字 肩 曲线 ,就 像 一 块 俄 铁 。 

在 下 图 中 你 可 以 切实 地 看 到 小 写字 母 n 相似 性 的 影响 。Gill Sans 字体 和 Adobe Garamond 字 
体 的 小 写字 母 n 都 是 人 文 主义 风格 ， 所 以 这 两 个 字体 都 是 人 文 主义 字体 ， 而 Times New Roman 
字体 却 是 现实 主义 字母 结构 ， 所 以 它 无 法 很 好 地 和 Gill Sans 字体 配对 


Adobe Garamond 字体 的 人 文 主 Adobe Garamond 

义 字母 结构 使 它 和 Gill Sans 字 | ] And Gill Sans both have a 

体 的 配对 效果 要 好 于 Times New Humanist letter structure. 
Roman 字体 和 Gill Sans 字体 的 配 

对 效果 n Times New Roman 


Has a Realist letter structure, so it 
doesn't go as well with Gill Sans. 


在 试 着 协调 两 种 字体 时 ， 从 小 写字 母 口 中 就 可 以 明显 地 看 出 其 搭配 效果 的 好 坏 
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A.3.4 终极 技巧 : 相信 字体 设计 师 的 选择 


如 果 你 不 想 通过 仔细 筛选 数 千 种 字体 的 方式 ， 来 找寻 能 和 你 钟爱 的 字体 协调 搭配 的 字体 ， 
一 个 比较 好 的 捷径 就 是 从 同一 字体 设计 师 所 设计 的 字体 中 选择 配对 字体 。 设 计 字 体 是 非常 辛苦 
耗 时 的 过 程 ， 所 以 关于 如 何 创作 好 的 字体 ， 字 体 设计 师 往往 有 着 自己 独特 的 设计 哲学 。 

大 多 数 人 并 不 会 留意 是 谁 设计 了 他 们 正在 使 用 的 字体 ， 但 了 解 字体 设计 还 是 很 有 必要 的 。 
字体 设计 需要 高 超 娴熟 的 技艺 ， 设 计 字体 的 人 值得 人 们 尊重 与 了 解 。 

假如 你 非常 喜欢 Gill Sans 字体 ， 其 人 文 主义 的 结构 为 设计 赋予 了 亲切 友好 的 感觉 ， 而 这 和 
你 的 项 目 宗旨 完全 契合 。 通 过 Google 搜索 ， 你 会 发 现 Gill Sans 字体 是 由 Eric Gil 设计 的 ， 而 他 
还 设计 过 一 种 叫做 Joanna 的 衬 线 字 体 。 那么 Joanna 字体 和 Gill Sans 字体 的 搭配 效果 肯定 不 会 差 。 

如 图 A-15 所 示 ， 这 两 种 字体 实际 上 可 以 很 协调 地 搭配 在 一 起 。Joanna 字体 有 着 类 似 的 人 文 
主义 字母 结构 ， 而 且 还 洋溢 着 能 和 Gill Sans 字体 协调 搭配 的 其 他 微妙 细节 ， 比 如 小 写字 母 a 上 
半 部 分 的 笔画 调整 


图 A-15 
J Sanna 由 Eric Gil 设计 的 Joanna 字体 


ls a font designed by Eric Gill, just 和 Gil Sans 字体 ， 流 露 着 设计 
like Gill Sans is. 者 相同 的 设计 理念 ， 因 此 能 够 
很 协调 地 搭配 在 一 起 


A.4 常用 字体 


正如 前 文中 提 到 的 ， 如 果 可 以 投入 大 量 时 间 来 学 习 造 成 字体 差异 的 所 有 细微 差别 ， 那么 在 
任何 情况 下 你 都 可 以 娴熟 地 从 数 千 种 字体 中 选择 出 正确 的 字体 。 但 是 你 没 必要 这 么 做 。 

表 A-1 列 出 了 所 有 你 最 需要 的 字体 。 这 并 不 是 说 世界 上 只 有 这 么 多 好 字体 ， 而 是 说 在 任何 
情况 下 你 从 中 选择 一 种 或 ( 能 够 正确 搭配 的 ) 两 种 字体 ， 使 用 效果 都 不 会 差 。 在 可 预见 的 未 来 
之 内 ， 只 使 用 这 些 字体 一 样 可 以 创作 出 漂亮 实用 的 设计 。 


对 比 有 利 设计 


在 类 似 于 质感 和 字符 宽度 这 样 的 属性 中 ， 细 微 的 差异 就 会 产生 视觉 上 的 不 愉快 感 ， 而 对 比 
效果 无 论 是 愤 重 的 还 是 夸张 都 可 以 增加 视觉 洽 说 感 。 参 考 “ 和 谐 与 对 比 ” 框 注 中 ， 将 Bodoni 
Condensed Bold 字体 用 作 奈 题 ，G 刘 Sans 字体 用 作 正 文 的 图 片 。Bodoni Condensed Bold 字体 的 字 
符 宽度 非常 窗 ， 并 且 笔画 址 细 反 差 极 大 ， 因 此 非常 运 合 类 似 的 标题 应 用 。 但 可 以 看 出 应 用 在 正 
文中 时 可 读 性 不 佳 一 -尽管 用 于 像 引 言 段 落 这 样 非 常 短 的 文本 部 分 ， 也 是 可 以 接受 的 - 

但 由 于 这 种 字体 的 极端 特征 ， 和 哪 种 正文 字体 搭配 使 用 都 已 经 无 关 紧 和 要 了 - 只 要 是 在 正文 
中 显示 良好 的 字体 ， 就 可 以 很 好 地 和 这 种 特 排 字体 配对 使 用 。 理 论 上 素 说 ， 因 为 Bodoni 字体 党 
到 了 强烈 的 几何 学 影响 ， 所 以 往往 和 像 Futura 这 样 的 几何 无 守 线 字体 搭配 时 效果 最 佳 ， 
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表 A-1 
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常用 字体 列表 


Adobe Garamond “> ™™ 


He sx 了 Palatino 


村 组 ， 传 统 


衬 线 ， 传统 


村 线 ， 现代 


村 线 ， 现代 
(slabrgerit ) 


衬 线 ， 现 代 
(sabserit 


无 村 线 


无 村 线 


无 村 线 


无 笠 线 


无 村 线 


无 村 线 


无 材 线 


无 村 线 


Baskerville 
Georgia 
Bodoni 
Rockwell 
Museo Stab 
Arial 

Futura 

Gill Sans 
Helvetica 
Lucida Grande 
Tahoma 
Trebuchet MS 


Verdana 


人 文 主义 


现实 主义 


现实 主义 


几何 ， 
现实 生 义 


几何 


人 文 主义 


现实 主义 


几何 


人 文 主义 


现实 主义 


人 文 主义 


人 文 主义 


人 文 主义 


人 文 主义 


印刷 


印刷 


印 出 


Web 


印刷 


印刷 


印刷 


If so, perhaps that head 
Start, amplified over the last 
13,000 years, provides the 
answer to Yalfs question. 


I so, perhaps that head start, 
amplified over the last 13,000 
Years, provides the answer to 
Yolfs question. 


Wf so, perhaps that head start, 
amplified over the last 13,000 


Futura Anal Gil Sans 
Helvetica, Tahoma 
Verdana 


G Sans uad 
Grande, Tahoma 
Verdana 
Trebuchet MS 
Georga Baskervile. 
Bodont Rockwell 


Bodoni, Rockwell 
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当然 ， 还 有 很 多 杰出 的 字体 并 没有 出 现在 这 张 表格 中 。 其 中 一 个 明显 的 遗漏 就 是 Times 
New Roman 字体 一 一 一 种 相当 不 错 的 过 渡 性 字体 。 我 之 所 以 没有 加 入 这 款 字 体 是 因为 Georgia 
字体 就 是 一 款 针 对 屏幕 局 限 性 设计 的 ， 非 常 优秀 的 过 渡 性 衬 线 字 体 。1931 年 设计 Times New 
Roman 字体 的 主要 初衷 是 为 了 节省 《泰晤士 报 》 的 空间 。 在 报纸 上 自然 是 用 越 节省 纸张 的 字体 
印刷 ， 就 会 越 节省 成 本 。 但 是 在 不 用 纸张 的 Web 时 代 ， 让 我 们 再 忍受 为 节省 纸张 而 造就 的 罕 字 
体 似乎 就 不 太 合理 了 。 基 于 以 上 考虑 ， 如 果 你 仍 想 使 用 Times New Roman 字体 ， 特 别 是 在 CSS 
字体 库 中 作为 Georgia 字体 的 备用 字体 使 用 ， 那 也 完全 可 以 。 

另 一 种 流行 字体 是 你 在 学 校 论文 中 常用 的 ( 因为 它 能 自动 使 你 的 文章 篇 幅 更 长 一 些 ) 
Courier New 字 体 。 这 是 一 种 slab-serif 字 体 ,而 且 还 是 等 宽 字体 ,这 意味 着 该 字体 没有 字 距 调整 表 ， 
换 句 话 说 就 是 每 个 字母 占有 相同 的 水 平 空间 ， 而 不 需 仔细 排列 来 更 好 地 适应 其 他 字母 。Courier 
New 字体 和 其 他 的 等 宽 字 体 ( 比如 Monaco 字体 ) 会 在 正文 中 形成 不 均匀 的 质感 ,这 样 会 很 难看 ， 
应 该 避免 在 普通 文本 中 使 用 它们 。 这 些 字体 通常 被 用 在 代码 示例 当中 ， 以 及 可 以 接受 其 效果 的 
场合 中 。 


附录 


排版 规范 


在 语言 伴随 科技 的 演进 过 程 中 ， 形 成 了 各 种 各 样 的 规则 和 习惯 、 风 俗 和 禁忌 。 要 区 分 出 哪 
些 规则 现在 仍然 适用 ， 哪 些 已 经 过 时 ， 有 时 候 是 非常 困难 的 
在 本 附录 中 ， 我 会 介绍 一 些 在 当今 科技 发 展 下 ， 人 们 使 用 字体 时 出 现 的 一 些 常见 错误 。 我 
还 会 概括 一 些 新 手 设计 师 需要 掌握 的 排版 “规则 ” 
无 需 记 住 并 遵循 所 有 这 些 规则 。 我 的 目的 就 是 以 简单 的 方式 说 明 清 晰 的 排版 沟通 原则 。 如 
果 你 不 是 本 附录 的 目标 读者 , 那 只 需 记 住 以 下 这 些 原则 。 
口 排版 中 存在 语言 沟通 。 任 何 阻碍 或 者 扰乱 这 种 沟通 的 设计 都 是 不 可 取 的 。 
口 排版 样式 是 语言 和 媒介 的 混合 产物 。 在 设计 排版 的 过 程 中 做 出 决策 时 ， 应 该 始终 考虑 到 
媒介 的 内 在 特质 。 
口 字 体 设计 是 为 了 让 每 个 字母 都 充分 发 挥 其 内 在 特质 ， 并 间或 营造 特殊 气氛 。 字母 样式 应 
该 彼此 协调 一 致 ， 而 不 会 出 现 个 别 字母 与 众 不 同 的 情况 。 
口 字体 设计 应 该 得 到 尊重 。 设 计 优秀 字体 需要 精湛 的 技艺 ， 并 倾注 一 生 的 心血 。 任 何 对 字 
体 品 质 的 修改 都 会 影响 到 其 沟通 能 力 的 清晰 程度 
口 所 有 正文 文本 段落 都 应 质感 均匀 - 正文 应 该 清晰 易 懂 ， 而 质感 均匀 是 实现 这 一 目标 的 最 
直接 方式 。 
口 信息 间 的 视觉 差异 应 该 和 信息 承载 量 相 匹 配 。 在 很 多 情况 下 ， 细 微 的 排版 差异 就 足以 建 
立 起 信息 的 层次 结构 。 比 如 说 仅仅 为 标题 使 用 不 同 的 尺寸 和 粗细 ， 并 在 其 上 下 文 留 下 空 
白 区 域 。 正 文部 分 应 该 使 用 最 简单 的 排版 差异 来 促进 信息 的 快速 传递 。 
以 下 是 一 些 适用 于 这 些 原则 的 通用 规则 。 


B.1 不 要 自 改 字体 


在 早期 印刷 年 代 , 字母 都 是 在 钢 制 字 范 上 仔细 刻 制 之 后 ,再 用 铅 浇 铸 而 成 的 。 对 于 给 定 字体 ， 
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制作 不 同 粗细 和 尺寸 的 字母 都 需要 重复 这 一 过 程 。 而 今天 ， 任 何人 都 能 用 桌面 出 版 软件 任意 地 
(弯曲 、 扭 曲 等 ) 臭 改 字体 。 字 体 都 是 经 过 精心 设计 的 ， 它 们 温和 的 样式 并 无 不 妥 ， 所 以 应 避免 
以 上 这 些 做 法 。 下 面 是 一 些 最 常见 的 字体 篡改 情况 。 





B.1.1 仿 粗 体 


幸运 的 是 ， 如 果 只 是 用 CSS 设置 属性 font -weight: bold 时 , 浏览 器 会 自动 匹配 恰当 的 
字体 ( 如 果 有 的 话 )， 但 是 一 些 桌 面 出 版 软件 也 能 实现 仿 粗 体操 作 ( 比如 Photoshop 字符 工具 中 
的 仿 粗 体 按钮 ) 这 种 人 为 加 粗 的 字体 基本 上 只 是 在 原 有 字体 基础 之 上 增加 了 一 层 轮 廓 线 。 这 会 
抹杀 掉 字 母 样式 的 所 有 细节 ， 而 且 通 常会 填 满 细小 的 字 谷 样式 ， 降 低 字体 的 可 读 性 。 

如 图 B-1 所 示 ， 从 泻 染 效果 上 来 看 ,， 仿 粗 体 字 体 无 法 像 真 正 粗 体 字体 那样 优雅 。 相 比 之 下 ， 
仿 粗 体例 子 的 衬 线 显得 异常 笨重 ， 而 笔画 调整 更 是 十 分 平庸 


图 B-1 
Chubby Bunny Chubby Bunny 人 
真 Georgia 相 体 仿 Georgia 粗 体 
B.1.2 仿 斜 体 


同样 , 在 CSS 中 设置 属性 font -style: italic 时 , CSS 会 自动 匹配 正确 的 字体 版 本 ( 如 
果 有 的 话 )。 但 在 一 些 桌 面 出 版 软件 中 也 有 能 创建 仿 斜 体 的 按钮 。 通 常 这 些 软件 只 是 简单 地 以 倾 
斜 字体 、 扭 曲 字母 结构 的 方式 来 修改 字体 

很 多 字体 的 真正 斜体 都 有 着 类 似 手 写 体 样式 的 外 观 ， 如 图 B-2 所 示 的 Georgia 字体 


图 B-2 
Tiny Dancer Tiny Dancer 不 同 于 用 软件 人 工 创 
建 的 斜体 样式 ， 一 些 
字体 ( 比如 Georgia 
字体 ) 的 斜体 有 着 类 
似 手写 体 的 样式 


真 Georgia 斜体 仿 Georgia 斜体 


即使 没有 手写 样式 的 斜体 版 本 ,使 用 真正 的 斜体 字体 ( 有 时 也 被 称 作 oblique ) 也 胜 过 人 为 
倾斜 的 版 本 ( 见 图 B-3 )。 正 如 图 B-4 所 示 ， 虽 然 两 者 之 间 的 区 别 不 是 很 明显 ， 但 要 知道 ， 排 版 
就 是 一 场 像素 的 博弈 。 





图 B-3 
To the Extreme To the Extreme 人 二 生字 休 有 首 
定制 的 斜体 样式 ， 不 
真 Helvetica 斜体 仿 Helvetica 斜体 会 产生 类 似 人 为 倾斜 
那样 的 形变 
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图 B-4 

图 中 ,二 JE 的 esdiea To the Extreme 
偏 斜 字体 ( 灰色 ) 被 

县 加 在 软件 创建 的 仿 真 Helvetica 斜体 (oblique 仿 Helvetica 斜体 
斜体 (粉色) 之 上 


B.1.3 仿 小 型 大 写字 母 


这 种 排版 瑕 疲 要 比 使 用 仿 斜 体 或 者 仿 相 体 更 难 避 免 。 当 你 使 用 CSS 的 font-variant: 
small-caps 属性 时 ， 即 使 有 可 用 的 真正 小 型 大 写字 母 ( small-caps ) 版 本 ， 浏 览 器 也 会 用 小 号 
的 大 写字 母 替换 所 有 小 写字 母 来 创建 出 仿 小 型 大 写字 母 。 

那么 这 就 是 小 型 大 写字 母 吗 ? 事实 上 并 不 是 。 真 正 的 小 型 大 写字 母 都 是 字体 定制 的 ， 很 好 
地 融合 了 ( 创建 出 均匀 的 质地 ) 字体 的 小 写字 和 母 特征 。 因 此 ， 它 们 的 高 度 通常 和 字体 小 : 
的 x 高 度 保持 一 致 ， 而 且 笔 画 也 要 比 字 体 大 写字 母 稍微 粗 一 点 ， 也 稍微 宽 一 些 ， 如 图 B-5 所 示 。 









图 B-5 
oo (CHOCOLATE RAIN 
字体 的 大 写字 母 仿 小 型 大 写字 母 


CHOCOLATE RAIN 


真正 的 小 型 大 写字 母 


可 能 你 不 会 想到 采用 小 型 大 写字 母 ， 但 对 于 专业 的 排版 设计 师 来 说 ,为 了 避免 像 HTML 这 
样 的 首 字母 缩 略 词 在 正文 中 显得 过 于 突 元 .从 而 打 断 阅读 ， 采 用 小 型 大 写字 母 是 非常 有 用 的 。 
为 了 避免 使 用 这 些 看 起 来 糟糕 的 字母 ， 你 可 以 在 CSS 中 设置 efont-face， 而 不 能 采用 


font-variant: small-caps， 如 下 所 示 : 


@font-face { font-family: "Adobe Garamond SC"; src: 
local ("Adobe Garamond sc"); } 

p abbr { font-family: "Adobe Garamond SC"; text-transform: 
lowercase; } 


问题 是 ( 在 第 3 章 中 曾 提 及 过 ) Adobe Garamond 字体 ( 以 及 大 部 分 带 有 专门 小 型 大 写字 母 
的 其 他 复杂 字体 ) 样式 过 于 细微 ， 以 至 于 在 Web 正文 尺寸 下 可 读 性 较 差 。 而 类 似 Georgia 字体 
和 Arial 字体 的 Web 字体 ， 又 没有 专门 的 小 型 大 写字 母 版 本 可 用 。 

因此 ， 另 外 一 种 解决 方案 就 是 调整 仿 小 型 大 写字 母 。 由 于 仿 小 型 大 写字 母 的 主要 问题 是 其 
笔画 太 细 ， 所 以 可 以 通过 简单 地 加 粗 仿 小 型 大 写字 母 ， 使 它们 看 起 来 更 具 说 服 力 。 而 且 ， 稍 微 
放宽 字 间 距 ， 让 质感 更 接近 标准 小 写字 母 的 质感 ， 也 能 提高 说 服 力 - 下 面 是 代码 样 例 : 
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abbr, .smallcapssim { font-variant: small-caps; fcnt-weight: 
normal; letter-spacing: .05em; } 
acronym, .smallcapssim span { font-weight: bold; } 


<p>The acronym <abbr title="HyperText Markup Language">HTML</abbr> will blend in 
with the text better, as will the keyboard shortcut <span class="smallcapssim"> 
Cespan>trl</span> + A<span>lt</span> + D<span>elete</span></span></p> 


图 B-6 显示 出 CSS 原 小 型 大 写字 母 和 “修正 ”后 的 小 型 大 写字 母 的 对 比 效果 。 虽 然 调整 过 
的 仿 小 型 大 写字 母 有 些 偏 高 偏 窗 ， 但 总 比 调整 前 的 效果 稍 好 一 些 。 


PIANO CAT Mw 


CSS 原 小 型 大 写字 母 说 服 力 的 小 型 
它 在 粗细 上 





PIANO CAT 


CSS 小 型 大 写字 母 经 修正 后 的 版 本 


虽然 ， 这 些 相当 枯燥 的 标记 代码 ， 是 可 以 通过 jQuery 或 者 某 种 Web 框架 以 及 CSS 的 插件 
来 自动 生成 的 ,但 这 一 过 程 也 相当 枯燥 。 就 像 设计 、 生 产 上 的 所 有 的 事情 一 样 ， 经 济 因素 在 其 
中 发 挥 着 作用 。 如 果 无 法 让 别人 认同 这 种 低 回报 的 额外 工作 ， 那 你 可 以 根据 喜好 来 选择 : 要 么 
让 首 字母 缩写 词 在 正文 中 占据 视觉 优势 ， 要 么 就 忍受 瘦弱 的 仿 小 型 大 写字 母 。 但 不 管 怎样 ， 使 
用 仿 小 型 大 写字 母 从 技术 上 来 讲 都 是 不 正确 的 


B.1.4 拉 伸 字体 


出 于 种 种 原因 ， 有 时 设计 师 会 想 要 修改 字体 的 默认 特性 ， 有 时 候 是 为 了 给 某 个 特定 空间 设 
计 匹 配 的 特定 文字 ; 而 有 时 ， 只 是 为 了 通过 修改 字体 而 提升 设计 作品 的 创新 力 

字体 设计 是 极其 谨慎 而 且 需 要 极 高 技艺 的 ， 而 且 数 千年 来 已 建立 了 成 熟 的 套路 。 拉 伸 或 者 
扭曲 这 些 精心 设计 的 字体 永远 都 是 错误 的 。 

如 图 B-7 所 示 ， 人 为 压缩 的 Helvetica 字体 和 Helvetica Condensed 字体 ( 你 可 能 需要 非常 仔 
细 地 观察 图 左 侧 两 个 样 例 的 区 别 ) 是 完全 不 同 的 ，Helvetica Condensed 字体 的 设计 本 意 是 收 窜 
Helvetica 字体 。 拉 伸 或 者 压缩 字体 会 扭曲 样式 ， 破 坏 经 过 深思 熟 虑 的 笔画 调整 。 


Snap into it Snap into it :arrsrns 


被 压缩 的 Helvetica 粗 体 Helvetica 粗 体 破坏 其 经 过 深思 熟 虑 
的 样式 ， 应 该 使 用 专 


Snap into it Srapintoit 门 绘制 的 字体 代替 


Helvetica 粗 体 经 拉 伸 后 变 得 更 为 狭 罕 Helvetica 粗 体 经 严重 拉 伸 后 的 效果 
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CSS 的 font-stretch 属性 据 称 可 以 用 来 修改 字体 ， 但 幸运 的 是 ， 几 乎 没有 任何 浏览 器 支 
持 这 个 属性 。 


B.1.5 ”勾勒 字体 轮廓 


有 些 情况 下 ， 设 计 师 可 能 想 为 字体 勾勒 轮廓 。 大 多 数 情况 下 ， 最 好 将 字体 放 在 同一 个 连续 
的 背景 之 下 ,以 免 干 扰 读 者 对 字母 样式 的 辨别 ， 但 有 时 ， 比 如 在 标记 地 图 时 ( 见 图 B-8 )， 为 字 
体 提供 高 对 比 效果 的 轮廓 极 大 地 提高 了 它 的 可 读 性 。 


图 B-8 

在 复杂 的 背景 下 仔细 
地 勾勒 字体 轮廓 可 以 
使 字体 更 具 可 读 性 ， 
例如 在 Google Maps 中 





类 似 Adobe lllustrator 这 样 的 矢量 绘图 软件 ， 在 设计 师 在 为 字体 勾勒 轮廓 时 很 容易 干扰 到 字 
母 样式 ， 进 而 影响 字体 的 可 读 性 。 所 以 选择 沿 字母 样式 外 沿 勾勒 轮廓 的 选项 是 非常 重要 的 。 如 
果 字母 轮廓 跨越 了 字母 样式 的 边沿 ， 就 会 干扰 字母 的 样式 ， 就 如 图 B-9 所 示 的 那样 。 


"ir Get Around GestAround 


字母 的 样式 ， 就 会 让 pe 沿 字 
文字 更 难以 阅读 。 应 DR Helvetica 粗 体 ， 认 字母 外 沿 勾勒 轮 刻 
该 沿 字母 样式 外 沿 色 

勒 轮 亡 


B.1.6 ” 带 图 片 或 者 纹理 的 字体 


设计 专业 的 一 年 级 学 生 在 这 一 问题 上 犯错 的 可 能 性 要 比 设计 高 手 们 多 得 多 。 一 旦 初 涉 设 计 
的 学 生发 现 了 Photoshop 中 的 滤 镜 ， 他 们 就 会 立刻 在 尽 可 能 多 的 地 方 使 用 这 些 滤 镜 ， 甚 至 是 排 
版 中 。 

这 些 滤 镜 和 特效 使 得 在 排版 样式 中 直接 加 入 图 片 或 者 纹理 变 得 非常 容易 。 这 种 想法 很 糟糕 ， 
如 图 B-10 所 示 ， 在 文本 中 加 入 纹理 或 者 图 片 使 得 字母 样式 边沿 和 纹理 或 者 图 片 的 明暗 以 及 颜色 
变化 产生 竞争 ， 从 而 使 这 些 字母 样式 难以 辨认 。 
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B-10 
在 文本 中 加 SE 


Spotted Owl 2% 





中 的 明暗 变化 产生 况 
争 ， 进 而 使 文本 难以 


阅读 。 将 文本 置 于 纹 
理 或 者 图 片 之 上 也 会 


Spotted ON 





将 文本 放置 在 图 片 或 者 纹理 之 上 通常 也 不 是 什么 好 主意 。 如 果 必 
择 低 对 比 效果 的 图 片 或 者 纹理 。 但 要 确保 字体 和 图 片 台 
效果 达 不 到 ， 可 以 像 上 一 小 节 中 描述 的 那样 尝试 为 字体 





这 么 做 ， 那 么 试 着 选 
纹理 之 间 的 对 比 效果 明显 。 如 果 对 比 
勾勒 出 轮廓 






B.2 正文 设置 


在 设置 正文 段落 时 ， 你 的 主要 目标 应 该 是 构建 出 均匀 的 质地 ， 以 使 实 
的 工作 则 是 使 读者 尽 可 能 流畅 地 获取 信息 。 这 两 个 目标 都 需要 在 
的 标点 和 视觉 差异 来 实现 






清晰 可 读 。 而 
本 中 使 用 最 简单 





B.2.1 显示 段落 间 的 变化 


体现 段落 的 变化 即 可 以 使 用 首 行 缩 进 ， 也 可 以 使 用 段 后 空白 ,但 永远 不 要 同时 使 用 两 者 。 
体现 新 段落 开始 的 唯一 目标 是 为 了 简单 地 表明 前 一 段 已 经 结束 了 ， 新 段落 即将 开始 。 只 靠 缩 进 
或 者 相 邻 两 段 之 间 的 空白 区 域 就 可 以 明确 地 显示 出 段落 的 起 止 。 两 者 都 用 则 过 犹 不 及 ， 使 空白 
区 域 显得 既 笨拙 又 不 规则 。 

缩 进 并 不 需要 太 长 ,通常 只 需 要 大 约 lem ( 如 果 字 体 为 12 像素 ,那么 缩 进 长 度 相当 于 约 12 
像素 。 如 果 使 用 段落 后 的 空白 区 域 ， 一 个 换行 符 的 宽度 一 般 太 多 了 ， 通 常 大 约 0.8em 比较 合 i 

缩 进 段落 时 ， 不 需要 缩 进 每 章节 的 第 一 段 ， 因 为 这 显然 是 多 余 的 

在 段落 边缘 使 用 引号 或 者 下 沉 首 字母 这 样 的 标点 符号 和 装饰 符 ， 可 以 补偿 一 些 视觉 重量 感 
的 变化 ,使 得 文本 段落 的 边缘 部 分 看 起 来 清晰 可 辨 - 如 图 B-11 所 示 ， 引 号 就 像 视觉 信号 灯 ， 如 
果 不 把 它们 放 在 段落 边缘 ( 其 实 就 是 margin 处 )， 这 段 文字 看 起 来 就 像 少 了 一 些 内 容 一 样 。 当 
引号 出 现在 段落 边缘 时 ， 它 们 使 文本 段落 显得 更 简洁 
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图 B-11 “Today I want to tell you three “Today 1 want to tell you three 

引号 缩 进 使 文本 段落 stories from my life. Thats it. No stories from my life Thats it. No 
big deal. Just three stories The first big deal Just three stories. The first 

边缘 看 起 来 更 清晰 story is about connecting the dots” story is about connecting the dots” 


通过 使 用 Adobe InDesign 这 样 的 高 端 桌 面 出 版 软件 ， 可 以 很 容易 地 为 段落 加 上 标点 ,但 在 
随意 的 CSS 段落 中 就 没 那么 容易 了 。 借 助 blockquote 可 以 很 容易 地 实现 引号 效果 ; 这 么 做 能 
让 段落 看 起 来 更 加 精致 

在 CSS 中 实现 首 字母 下 沉 要 稍微 麻烦 一 些 ， 但 这 种 效果 可 以 提供 非常 好 的 视觉 锚 点 ， 从 
而 引导 读者 的 视线 进入 首 段 的 文字 当中 。 由 于 下 沉 的 首 字母 其 尺寸 要 比 段 落 中 的 其 他 文字 大 
出 许多 ， 所 以 它 往往 需要 通过 轻 轻 地 将 大 写字 母 嵌 在 段落 边缘 之 内 ， 来 补偿 一 些 负 空 间 ( 见 图 
B-12), 


图 B-12 his was the start in my life. And lis was the srart in my life. And 
把 下 如 将 字母 稍 线 移 Te To 
到 段落 边缘 之 内 ， 而 ee rt we aoe we erp 
非 将 其 轩 于 一 个 起 象 Se 区 由 全 TI。 So 

的 边界 肉 ， 可 以 更 好 RN 王八 AI ee 
突出 其 存在 感 ， 并 能 

让 文本 段落 的 边界 显 

得 更 为 清晰 


就 像 排版 中 的 很 多 事情 一 样 ， 对 于 如 何 放 置 标点 符号 ， 敏 锐 的 洞察 力 要 比 几 何 学 或 者 科学 
理论 更 具 判断 力 。 

要 使 用 CSS3 创建 首 字 母 下 沉 效果 ( 这 在 Firefox、Chrome 和 Safari 中 有 效 ， 但 
IE 9 暂 不 支持 ) 需要 用 到 firet-letter 伪 类 ， 然 后 仔细 调整 字体 尺寸 、 边缘 和 行 
高 ， 以 使 下 沉 首 字母 的 尺寸 位 置 都 恰到好处 。 图 B-13 左 侧 效果 是 用 如 下 代码 创建 出 来 的 : 


p.opening:first-letter { 
display: block; 
float: left; 
font-size: 114px; 


line-height: 80px; /* Note that Firefox 3.x ignores lineheight; this value ie 
adjusted so that WebKit and Opera match Pirefox. */ 


margin: 8px Spx 0 -6px; 
padding: 0; 


} 


需要 注意 的 是 ， 段落 第 一 行 需要 排列 得 更 紧凑 些 ， 才 能 靠近 形状 不 规则 的 大 写字 母 D， 即 
使 针对 本 例 有 切实 可 行 的 方法 来 实现 适当 的 紧 排 ,但 对 于 动态 内 容 并 没有 什么 好 的 方法 ( 因为 
你 并 不 总 是 知道 需要 大 写 的 是 哪个 字母 )。 在 图 B-13 的 右 侧 部 分 ， 展示 了 完美 的 字母 紧 排 效果 。 
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图 B-13 
ere bap een 虽然 使 用 一 些 细致 的 CSS 代码 可 以 实现 

: 首 字母 大 写 ， 但 首 行 并 无 法 总 是 恰当 地 

lead thevic' lead the vic。 和 大 写 首 字 干 紧 排 在 一 起 ( 左 图 ) 如 

Since the dropped ca Since the dropped cas， 。 果 你 确切 知道 大 写字 母 到 底 是 哪 一 个 ， 
i 至 起 的 二 虐 调 星 。 运用 一 点 小 技巧 你 就 会 找到 恰当 的 紧 拓 


效果 ( 右 图 ) 


B.2.2 ”避免 等 距 调整 


很 多 人 都 喜欢 让 文本 段落 的 右 侧 对 齐 ， 看 起 来 就 像 激 光 切 割 过 一 般 。 这 种 习惯 非常 常见 ， 
但 应 该 完全 避免 在 Web 中 使 用 它 。 

在 最 佳 行 长 ( 每 行 约 50~80 个 字符 , 或 者 8~15 个 单词 ) 的 文本 段落 中 做 等 距 调 整 时 ， 需 要 
留 出 足够 的 空间 来 对 齐 文字 ， 需 要 一 些 字母 间距 ( 修改 字母 间 的 距离 ) 和 单词 间距 ( 修改 单词 
之 间 的 空白 大 小 汪 组 合 。 这 些 额 外 的 空白 区 域 会 改变 整 段 文本 的 质感 。 某 些 行 可 能 异常 宽松 ( 包 
含 文字 较 少 ) 或 者 紧密 ( 包含 文字 较 多 )， 从 而 使 正文 的 质感 不 再 均匀 。 

由 于 CSS 和 浏览 器 还 没有 能 力 控制 连 字 符 断 字 ， 这 大 大 加 剧 了 Web 上 等 距 调整 的 问题 。 连 
字符 断 字 能 使 每 行 的 字符 数量 更 加 一 致 。 如 图 B-14 右 侧 所 示 ， 没 有 连 字 符 断 字 使 文本 段落 看 起 
来 千 净 百 孔 。 


None of this had even a hope of any practical Nooe of this had even a hope of any pactical 图 B-14 
application in my li Bot ten years hter when we were applicdon in my Me Bot wn years later when we were a 
designing the licst Macintosh compoter, it al came back designing the first Macintosh computer # all came back 没有 连 字符 断 字 的 等 
‘to tne, and we designed it all inro the Moc Ir was the to me, and we designed it all into the Mac lt was the first 调 惠 会 法 各 的 
Ecoaptez wbeanthl ypogaphy Mf T had eevee cunputr walh brahal 9pognpr 1 1 bd ere- 距 调 整 会 造成 严重 的 
deopped in on that single course in colege, he Mac deopped in on that single coure in college, the Mac 不 均匀 质地 
woukd lave never had cultiple ype faces or woukd have never had mliple qpefaces or 
proportionally spaced fonts, and since Windows just Proportiomally spaced fonts, and since Windows just 
copred the Mac, it’ likely that po personal computer copied the Mac, its likely that no peryonal computer 
wonld have them would have them 

右边 末 对 齐 没有 连 字符 


保持 文字 右 侧 的 参差 不 齐 ( 通常 称 为 左 对 齐 )， 实 际 上 能 提高 可 读 性 一 一 因为 不 同 的 行 长 使 
读者 更 容易 区 分 哪 一 行 是 刚刚 读 过 的 ， 哪 一 行 是 即将 要 读 到 的 。 


B.2.3 ”避免 寡 行 和 孤 行 

袁 行 (widows) 在 Web 中 不 太 常 见 ， 是 指 在 页 面 或 者 专栏 的 顶部 出 现 前 一 段落 余 留 的 单 
字 词 。 

孤 行 (orphans) 是 指 段 落 的 最 后 一 行 以 单字 词 收 尾 ; 也 指 段落 的 第 一 行 出 现在 了 页 面 或 者 


专栏 的 底部 。 
这 些 现象 都 会 在 文本 段落 周围 形成 不 合适 的 空白 区 域 。 


212 黑客 与 设计 : 剖析 设计 之 美的 秘密 


防止 出 现 孤 行 的 方法 很 简单 : 在 段落 最 后 一 个 单词 之 前 使 用 不 间断 空格 ( snbsp; )， 而 不 
是 普通 的 空格 。 很 多 Web 框架 和 内 容 管理 系统 ( CMS ) 都 有 防止 寡 行 和 孤 行 的 插件 。 


B.3 ”注重 排版 细节 


很 多 细微 的 排版 细节 已 经 随 着 技术 的 改变 而 消逝 ,其 他 的 细节 也 被 忽视 或 者 饱 受 争议 。 其实， 
仔细 考虑 这 些 细节 可 以 创作 出 漂亮 的 排版 。 

Web 框架 或 者 CMS 中 的 插件 可 以 帮助 你 处 理 一 些 乏 味 的 排版 细节 ,但 最 终 取舍 还 是 取决 于 
你 自己 。 


B.3.1 并 非 所 有 的 引号 都 是 相同 的 


在 电脑 上 键 人 " 电脑 上 显示 的 引号 并 不 是 真正 的 引号 ( 除非 你 的 文字 处 理 软件 或 者 页 面 布 
局 软件 能 自动 生成 引号 )。 真 正 的 引号 被 称 为 智能 引号 ， 而 且 其 开 闭 引号 是 不 一 样 的。 开 引 号 使 
用 “sldquo; ) 而 闭 引 号 使 用 ”( srdguo; )。 单 开 引号 使 用 ( &lsquo; )， 而 单 闭 引号 使 用 * 
(&rsquoi ) 

键盘 上 的 "和 "还 经 常用 于 表示 英尺 和 英寸 ( 例如 史 蒂 夫 乔布斯 高 62" )。 技 术 层面 来 讲 ， 
这 同样 是 不 正确 的 。 对 于 英尺 应 该 使 用 '( gprime; ), 而 对 于 英寸 应 该 使 用 "( &Prime; )。 所 以 ， 
史 蒂 夫 ， 乔布斯 的 身高 实际 上 是 62"。 

在 图 B-15 中 ,我 们 可 以 看 出 大 尺寸 显示 下 的 引号 是 不 同 的 。 在 右 侧 字符 中 ,键盘 项 出 的 “上 上 
首 引 号 ”显得 毫 无 生气 ， 而 且 无 法 清晰 地 表达 它们 的 使 用 目的 。 而 左 侧 字符 中 的 智能 单 引号 以 
及 使 用 恰当 的 分 号 和 秒 号 ， 更 加 清晰 地 传达 了 信息 -。 


B-15 时 817 1 I 
"mgs She’s 5'6” she's 5'6 
号 和 秒 号 ( 左 图 ) 能 
够 更 加 清晰 地 区 分 出 

了 信息 的 性 质 

要 注意 的 是 ,很 多 先进 的 桌面 出 版 软件 能 够 自动 地 ( 而 且 不 恰当 地 ) 插入 智能 单 引号 和 引号 。 

当然 这 都 可 以 在 软件 的 参数 选择 中 进行 配置 .但 解决 这 个 问题 最 快捷 的 方式 是 从 简单 的 文本 编 
辑 器 中 复制 粘贴 过 来 。 


B.3.2 ”大 胆 地 使 用 破 折 号 

大 多 数字 体 都 配备 了 至 少 三 种 不 同 的 破 折 号 ; 连 字 符 ( - )， 短 破 折 号 (-， 宽 度 和 小 写字 母 
nn 相同)， 以 及 长 破 折 号 (一 ,宽度 为 lem 或 者 和 小 写字 母 m 宽度 相同 ) 

连接 文字 时 连 字符 最 有 用 ,但 由 于 Web 中 没有 连 字符 断 字 控 制 ， 连 字符 也 就 不 那么 重要 了 。 
你 最 有 可 能 在 复合 修饰 语 中 使 用 连 字符 ， 例 如 在 fine-tuned 这 个 词 中 。 有 些 人 习惯 把 连 字符 用 
作 减 号 ， 但 在 有 些 字体 中 ， 用 做 减 号 的 字符 比 连 字符 要 稍 长 一 些 一 这 种 字符 更 接近 短 破 折 号 ， 
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而 不 是 连 字符 。 

正如 Robert Bringhurst 在 《排版 风格 要 素 》 一 书 ( 可 谓 现 代 排 版 的 圣经 ) 中 建议 的 那样 ; 
在 文本 中 使 用 的 破 折 号 ， 应 该 是 短 破 折 号 ， 并 且 要 在 其 两 侧 都 留 有 空格 。 这 样 就 不 会 像 不 带 
空格 的 长 破 折 号 那样 形成 太 多 的 视觉 干扰 ( 不 带 空格 的 长 破 折 号 已 成 为 包括 《芝加哥 样式 手 
册 》 在 内 的 很 多 编辑 书籍 的 规定 )， 因 为 在 破 折 号 的 两 端 和 周围 的 字符 间 形 成 了 较 小 的 视觉 
张力 ， 所 以 这 样 使 用 破 折 号 不 会 打 断 流畅 的 文本 段落 。 此 外 ， 在 换行 时 ， 还 可 以 避免 形成 长 
字符 串 。 

用 两 个 连 字符 (-- ) 代表 破 折 号 是 打字 机 时 代 的 遗留 习惯 ， 除 了 会 在 视觉 上 破坏 流畅 的 
文本 段落 之 外 ， 在 交互 式 排版 设计 师 有 着 丰富 字符 集 的 时 代 ， 根 本 没有 必要 再 保留 这 个 习惯 
了 。 短 破 折 号 也 可 以 用 来 表示 数字 范围 ， 比 如 1999-2000， 在 这 种 情况 下 两 侧 并 没有 使 用 空 
间隔 。 


B.3.3 句点 后 面 使 用 一 个 空格 ， 不 是 一 对 


很 少 会 有 排版 参数 来 规定 代表 句子 结尾 的 句点 后 面 使 用 一 个 空格 还 是 一 对 空格 。 

这 种 习惯 是 从 维多利亚 时 代 ( 那 是 一 个 在 很 多 方面 都 十 分 落后 的 时 代 ) 的 印刷 者 那里 遗留 
下 来 的 。 束 身 内 衣 以 及 残害 身体 的 反 自慰 装置 最 终 被 历史 淘汰 ,但 玉米 片 和 这 个 不 良 的 排版 习 
惯 却 都 被 保留 了 下 来 ， 

对 于 那些 仍 持 怀疑 态度 的 人 , 请 记 住 : 当 一 个 英文 句子 结束 时 , 结尾 有 一 个 句点 , 一 个 空格 ， 
以 及 一 个 大 写字 母 ( 表示 一 个 句子 的 结束 和 另 一 个 句子 的 开始 )。 添 加 另外 一 个 空格 会 在 文本 段 
落 中 形成 空洞 ， 进 而 干扰 阅读 。 

打字 员 也 许 仍 要 使 用 一 段 时 间 的 双 空格 ， 但 排版 设计 师 就 不 需要 这 么 做 了 。 


B.3.4 使 用 连 笔 将 字母 连 在 一 起 


当 字 体 还 局 限于 在 铅字 时 ， 排 列 字 符 的 铅 条 很 难 将 一 些 字符 对 设置 得 足够 紧密 。 例如， 在 
字母 组 合 fhi 中 ， 小 写字 母 f 伸 出 的 上 端 无 法 足够 贴近 小 写字 母 1。 因 此 ， 很 多 字体 ( 通常 是 经 典 
字体 ， 例 如 Adobe Garamond 字体 ) 带 有 一 些 将 字母 合并 在 一 起 的 连 笔 。 而 一 些 现代 字体 ( 比如 
Helvetica 字体 ) 也 带 有 连 笔 ， 如 果 不 使 用 ， 你 也 许 根本 就 不 会 注意 到 的 它们 的 存在 。 

在 图 B-16 中 可 以 看 到 ， 一 些 字体 中 对 连 笔 的 需求 要 比 其 他 字体 强烈 得 多 。 图 左 侧 显 示 了 没 
有 使 用 连 笔 的 字体 , 右 侧 显示 了 使 用 连 笔 的 字体 。Adobe Garamond 字体 和 Georgia 字体 的 fi 和 和 
字母 对 视觉 张力 特别 明显 ， 虽 然 Helvetica 字体 也 有 连 笔 但 它 和 不 带 连 笔 的 字体 之 间 没 有 什么 
可 以 察觉 的 区 别 。Georgia 字体 没有 年、 全 以 及 人 钮 组 合 的 连 笔 。 

显然 ,无 论 适用 与 否 , 键入 连 笔 都 是 不 可 行 的 ， 而 且 即 使 键入 了 连 笔 你 也 会 冒 着 最 终 显 
示 的 文本 内 容 不 能 正常 显示 的 风险 。 因 此 ， 一 些 类 似 于 jQuery Ligaturejs 的 插件 可 以 自动 地 在 
合适 的 位 置 插入 最 常见 的 连 笔 。 但 要 小 心 ， 即 使 有 着 合适 的 连 笔 字符 ， 也 可 能 会 让 你 的 用 户 无 
法 使 用 浏览 器 中 的 查找 功能 查找 到 这 些 内 容 。 在 写 这 本 书 时 ，IE 和 基于 WebKit 的 浏览 器 ( 例 
如 Chrome 和 Safari ) 能 在 使 用 查找 功能 时 识别 出 连 笔 字 ( 也 就 是 说 ， 用 户 可 以 在 你 的 页 面 中 搜 
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索 连 笔 字 fig )， 而 Firefox 还 无 法 实现 

CSS3 中 的 font-variant-ligatures 属性 会 显示 出 合适 的 连 笔 字 ， 同 时 又 不 会 干扰 实际 
的 HTML 页 面 代码 ， 因 此 任何 浏览 器 的 查找 功能 仍然 有 效 。IE 、Chrome 和 Safari 目前 还 不 支持 
这 个 属性 ,但 Firefox 已 经 提供 支持 


"eu fish fish 


字体 更 需要 连 笔 
Adobe Garamond 字 


Nom flounder flounder 


留 着 字体 的 原始 金属 


sg offer offer 
affinity affinity 


affluenza affluenza 


Adobe Garamond 


fish fish 
flounder flounder 
offer 


Georgla 


fish fish 


不 带 连 笔 Helvetica 带 有 连 笔 


所 以 ， 如 果 你 选择 在 内 容 上 使 用 连 笔 字 ,那么 你 的 Firefox 用 户 就 无 法 正常 使 用 查找 功能 ; 
如 果 你 选择 使 用 font -variant-1igatures 属性 ,那么 只 有 Firefox 浏览 器 用 户 可 以 看 到 连 笔 
字 。 由 于 浏览 器 对 连 笔 字 的 支持 参差 不 齐 ， 在 正文 中 完全 弃 用 连 笔 字 不 是 没有 道理 的 。 虽 然 对 
于 较 大 尺寸 的 篇 名 或 者 标题 ， 连 笔 字 可 能 极 不 使 用 ， 然 而 ， 你 尽 可 以 尝试 一 把 这 种 效果 。 





